垂直侧栏菜单保持100％高度的麻烦

Question

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

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

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

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

Answer 1

height:100%;占据了视口高度，因此如果您的身体内容增加到视口高度，那么您将看到您的侧栏100％高度作为其视口的原样。

您可以删除height:100%;，并使用固定定位并使用top:0;bottom:0;作为文档的顶部和底部值，您的代码可以正常工作。

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

另外，在使用固定定位时不要忘记使用宽度，否则，您可以使用左右值。