使导航栏占用css中的整个页面高度

Question

我正在使用css和html设计一个网站.我已经设法使用此css在我的页面左侧获得了一个导航栏,但是当屏幕向下滚动时,导航栏不再继续.

#navbar {
  background: #a8a599;
  float: left;
  width: 20%;
  height: 100%;
}

但是,我想使导航栏的高度为文档的高度.我觉得我可能需要java脚本,但是我不熟悉java脚本,所以我不知道如何实现这一目标.我认为高度100%将占据整个页面,无论它只占用页面的可见部分.

如果您想查看页面的其余部分,请点击此处 http://jsfiddle.net/HRpXV/3/embedded/result/

Answer 1

100%不适用,因为它是浮动的.将父容器更改为position: relative导航栏以position: absolute解决问题.

#container{
    position: relative;
}

#navbar {
    background: #a8a599;
    /*float: left; Instead of float, use absolute position*/
    position: absolute;
    width: 20%;
    height: 100%;
}

Demo