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

时间:2015-01-28 00:12:33

标签: html css navigation

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

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

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

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

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

1 个答案:

答案 0 :(得分:2)

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

检查updated example

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