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

前端之家收集整理的这篇文章主要介绍了javascript – 使导航栏占用css中的整个页面高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用css和html设计一个网站.我已经设法使用此css在我的页面左侧获得了一个导航栏,但是当屏幕向下滚动时,导航栏不再继续.
#navbar {
  background: #a8a599;
  float: left;
  width: 20%;
  height: 100%;
}

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

如果您想查看页面的其余部分,那么它就是小提琴
http://jsfiddle.net/HRpXV/3/embedded/result/

解决方法

100%不适用,因为它是浮动的.将父容器更改为position:relative,将navbar更改为position:absolute将解决问题.
#container{
    position: relative;
}

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

Demo

猜你在找的JavaScript相关文章