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

Question

我遇到了左侧导航栏设计的问题。具体来说，我希望条形图的灰色在整个页面中垂直显示。

现在，灰色条刚停在视口的末尾。有没有办法将条形扩展到无穷大？

以下是垂直导航栏的CSS代码段：

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

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

Answer 1

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

检查updated example。

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