使导航栏在css中占据整个页面高度

问题描述

我正在使用 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%;
}

演示

这篇关于使导航栏在css中占据整个页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！