css - 垂直侧边栏菜单保持 100% 高度的问题

Question

我一直在研究这个问题，但似乎找不到能正确解决我的问题的答案。我创建了一个垂直侧边栏菜单，它停靠在屏幕的左侧。菜单的背景颜色与页面的其余部分不同，并且应该与整个页面一样高。为此，我使用了 CSS 属性:

#menu {    
  height: 100%;
  background-color: #222;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

但是，当元素动态添加到正文并导致正文高度发生变化时，这会正常工作，菜单的高度将不再占据整个屏幕。相反，我在菜单的深色背景颜色下方得到了空白。当我在 Firefox 中打开控制台然后向下滚动时，也会发生这种情况。

如何让垂直菜单栏向下延伸到整个页面？到目前为止，我在 Stackoverflow 或 Google 上看到的类似建议似乎都没有用。

Answer 1

height:100%; 占据视口(viewport)高度，因此如果您的正文内容增加超过视口(viewport)高度，那么您会看到侧边栏的视口(viewport)高度为 100%是。

您可以删除 height:100%; 并且您的代码可以正常工作，通过使用固定定位和使用 top:0;bottom:0; 这将是文档的最高值和最低值。

#menu {
  /*height: 100%;*/
  background-color: #222;
  position: fixed;/*using fixed positioning only works*/
  top: 0px;
  bottom: 0px;
}

此外，在使用固定定位时不要忘记使用宽度，或者您可以使用左右值。