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

Question

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

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

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

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

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

Answer 1

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

检查 updated example .

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