使导航栏占用css中的整个页面高度 [英] Make navigation bar take up entire page height in 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 /

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中的整个页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！