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

Question

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

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

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

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

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

Answer 1

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

检查更新的示例。

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