html - 垂直调整视口(viewport)大小时，高度为 100% 的 Div 变得小于 100%

Question

我有一个具有 height:100%; 的 div但是当我垂直调整窗口大小时会发生这种情况(查看左侧的导航栏):

这是jsfiddle:https://jsfiddle.net/uygxjbr2/2/
这是有缺陷的元素:

.nav {
  /* position: fixed; */
  width: 250px;
  height: 100%;
  min-height: 100%;
}

.nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40% 0;
  height: 100%;
  color: #fff;
  background-color: #40404a;
}

我试过使用 /* position: fixed; */但这会破坏整个页面设计。
另外，我注意到的另一个问题是，当我垂直调整窗口大小时， .upper-page 的顶部消失，使其无法滚动。
我能做些什么 ？

Answer 1

好的，如果我理解正确，您的目标是侧面的导航栏始终是全身大小的高度。首先:不要为 html 本身添加样式，始终使用正文。 height 不像带 % 的宽度那样工作，它仅在您有关系时才有效，因此如果父元素具有固定高度，则 100% 有效，因此 body 和 html 上的 100% 将无法正常工作。因此，我建议进行以下更改:

html {
  /*height: 100%; <--- remove this! */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
}
body {
  /*height: 100%; <--- change this to the code below:*/
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #28282f;
}
.nav {
  width: 250px;
   /*height: 100%; <--- remove this! */
  min-height: 100%;
}

有了这个，你的 body 总是和你的屏幕一样高，导航栏总是 100% 的 body 。至少在我的测试中，这消除了导航栏下方的间隙。