导航菜单 - 使背景颜色填充整个页面而不是视口

Question

我对左侧导航栏的设计有疑问。具体来说，我希望栏的灰色在整个页面中垂直显示。

现在，灰色条刚好停在视口的尽头。有没有办法将条形图延伸到无穷大？

这是垂直导航栏的 CSS 片段：

#navbar{
  height: 100%;
  position: absolute;
  width: 70px;
  background-color: #5e5e5e;
}

http://jsfiddle.net/twkgR/264/

Answer 1

在这种情况下，您可以相对定位 body 元素。在这样做时，#menu 相对于 body 是绝对定位的。在此之前，#menu 元素相对于 window 是绝对定位的，这就是它在视口处结束的原因。

检查updated example。

body {
    position: relative;
}
#menu {
    position: absolute;
    border-right: 1px solid black;
    top: 0;
    bottom: 0;
}