问题描述
我正在使用 css 和 html 设计一个网站.我已经设法使用这个 css 在我的页面左侧获得一个导航栏,但是当屏幕向下滚动时,导航栏不再继续.
I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the navigation bar no longer continues.
#navbar { background: #a8a599; float: left; width: 20%; height: 100%; }
但是我想让导航栏的高度成为文档的高度.我觉得我可能需要 java 脚本,但是我是 java 脚本的新手,所以我不确定我将如何完成这个.我认为将高度设置为 100% 会使其占据整个页面,因为它只占据页面的可见部分.
However i would like to make the height of the navigation bar the height of the document. I feel like i might need java script for this, however i am new to java-script, so i am not sure how i would accomplish this. I thought making the height 100% would make it take up the whole page, owever it only takes up the visible part of the page.
如果您想查看页面的其余部分,请点击此处http://jsfiddle.net/HRpXV/3/embedded/result/p>
Here it is on fiddle if you want to look at the rest of the page http://jsfiddle.net/HRpXV/3/embedded/result/
推荐答案
100% 不适用,因为它是浮动的.将父容器改为position: relative,将导航栏改为position: absolute即可解决问题.
100% does not apply because it is floated. Change the parent container to position: relative and the navbar to position: absolute will solve the problem.
#container{ position: relative; } #navbar { background: #a8a599; /*float: left; Instead of float, use absolute position*/ position: absolute; width: 20%; height: 100%; }
演示