Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make navigation bar take up entire page height in 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%;
}

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.

Here it is on fiddle if you want to look at the rest of the page http://jsfiddle.net/HRpXV/3/embedded/result/

like image 535
Popgalop Avatar asked Nov 16 '13 12:11

Popgalop


People also ask

How do I change the full page height in CSS?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How can I make my nav bar full width?

The simplest way to get the effect you are looking for (for any number of buttons) is to use a table with a 100% width. A more complicated way is to give each button an equal percentage width such that with the number of buttons it adds up to 100%. You have 5 buttons, so you can put width:20%; on #nav ul li .

How do I extend the navigation bar in CSS?

You can use the CSS "height" property to force the navigation bar to extend to the bottom of the page. The feature makes the blog or website layout more evenly display the different sections of your page.


1 Answers

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%;
}

Demo

like image 125
Derek 朕會功夫 Avatar answered Oct 13 '22 00:10

Derek 朕會功夫