Question

侧边栏的div（红色）和导航栏的div（蓝色）不在同一高度。在我的情况下，分辨率很好，分辨率为1444 * 900。但是，当我尝试使用800 * 600之类的分辨率时，div的高度不同。而且我不知道为什么红色div上方有黑线。侧边栏的div是div内的div，我认为是问题所在，我找不到解决方法。

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

替换@media屏幕和（max-height：450px）{。sidenav {padding-top：0px;} .sidenave {font-size：18px;}。希望它能工作。

Answer 2

我发现您有媒体查询：

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

这是红色边栏上方的填充物。

Answer 3

A，提到您在媒体查询的边栏上有一个额外的填充（如果有意的话，您也应该将其添加到导航栏中）

并且侧边栏和导航栏固定类的高度不同（88px / 77px）。我都将其设置为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>

潜水员不在同一高度

3 个答案: