Divs are not at the same height

Question

The sidebar's div (red) and the navbar's div (blue) are not at the same height. Looks fine in a good resolution, 1444*900 in my case. But when I try with resolutions like 800*600 the div are not at the same height. And I do not know why there is a black line above the red div. The sidebar's div is a div inside a div, I think that is the problem, I can not find how to fixed.

var sticky = document.querySelector('.sticky');
      var divSticky = document.querySelector('.sidenavdiv');
		  document.addEventListener('scroll', function () {
		    if(window.scrollY > 0){
		    	sticky.classList.add('fixed')
          divSticky.classList.add('sidenavdivfixed')
		    }else{
		    	sticky.classList.remove('fixed');
          divSticky.classList.remove('sidenavdivfixed');
		    }
		  });

/* Sidenav */
.sidenav {
  height: 100%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 15%; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.sidenavdiv{
  background-color:red;
  height: 150px;
  transition: .32s;
}

.sidenavdivfixed{
  height: 88px;
  transition: .32s;
}
/* Sidenav */

/* Navbar */
.sticky {
  position: sticky;
  font-size: 32px;
  top: 0;
  width: 100%;
  height: 150px;

  background: #34495e;
  color: white;
  transition: .32s;
}

.fixed {
  font-size: 24px;
  position: fixed;
  height: 77px;
  transition: .32s;
}

body {
  margin: 0;
}

:root {
  height: 1000%;
  font-family: sans-serif;
}

/* Navbar */

<table class="sticky top"> 
  <tr>
		<td width="15%" ></th>
		<td>Hello</td>
  </tr>
</table>

<div class="sidenav">
  <div class="sidenavdiv">
    hello
  </div>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Titulo</h2>
  <p>Text.</p>
  <p>Text.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Answer 1

As,mentionned you had an extra padding on the sidebar in a media query (if intended you should add it to the navbar too)

And the sidebar and the navbar fixed classes did not have the same height (88px/77px). I've setted both to 77px:

var sticky = document.querySelector('.sticky');
var divSticky = document.querySelector('.sidenavdiv');
document.addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    sticky.classList.add('fixed')
    divSticky.classList.add('sidenavdivfixed')
  } else {
    sticky.classList.remove('fixed');
    divSticky.classList.remove('sidenavdivfixed');
  }
});

/* Sidenav */

.sidenav {
  height: 100%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 15%;
  /* Same as the width of the sidenav */
  font-size: 28px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav a {
    font-size: 18px;
  }
}

.sidenavdiv {
  background-color: red;
  height: 150px;
  transition: .32s;
}

.sidenavdivfixed {
  height: 77px;
  transition: .32s;
}


/* Sidenav */


/* Navbar */

.sticky {
  position: sticky;
  font-size: 32px;
  top: 0;
  width: 100%;
  height: 150px;
  background: #34495e;
  color: white;
  transition: .32s;
}

.fixed {
  font-size: 24px;
  position: fixed;
  height: 77px;
  transition: .32s;
}

body {
  margin: 0;
}

:root {
  height: 1000%;
  font-family: sans-serif;
}

<table class="sticky top">
  <tr>
    <td width="15%">
      </th>
      <td>Hello</td>
  </tr>
</table>

<div class="sidenav">
  <div class="sidenavdiv">
    hello
  </div>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Titulo</h2>
  <p>Text.</p>
  <p>Text.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Answer 2

Replace @media screen and (max-height:450px){.sidenav {padding-top: 0px;} .sidenave a {font-size:18px;}. Hopefully it will work.

Answer 3

I found out that you have a media query:

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

That's the padding above your red sidebar.