Make navigation bar take up entire page height in

Question

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/

Answer 1

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

Answer 2

Using only HTML and CSS you can usually fix this 100% height issue by using:

body,html{
   height:100%;
}

If you want to use the JavaScript method then this should work

document.getElementById("navbar").style.height=window.innerHeight;

That will set the height of the navBar element to whatever the height of the browser window is

Answer 3

It took my like 2 hours but I finally found solution to this! Accepted answer by Derek almost work but as my comment suggests, not entirely. When your left bar has more content then main bar, left menu wont stretch up to the height of its content. You maybe never get so many options in that menu but I am building new administration wich will have many modules in future and you never know if it can happen or not.

Solutions are old good tables! Dont worry, not quite. Only css display property with value of table, table-row and table-column:

Basic idea:

#page {
    display: table;
    min-height: 100%;
    width: 100%;
}
#pageRow {
    display: table-row;
}
#leftMenu {
    display: table-cell;
    width: 300px;
    background-color: red;
}
#content {
    display: table-cell;
    background-color: blue;
}

1. little content in both sections http://jsfiddle.net/85w56gkx/1/

2. more content in left menu section http://jsfiddle.net/1o92r7ao/

3. more content in main content section http://jsfiddle.net/Ldav83vn/

Answer 4

If you plan to have the navBar fixed you can do something along the lines of Fiddle

*{
    margin:0;padding:0;
}
#navBar {
    background: red;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
}
#content {
    background: yellow;
    min-height:1000px;
    display: block;
    margin-left: 100px; /*width of nav bar*/
}

Answer 5

You could just modify your #navbar css and set position to fixed

#navbar {
  background: #a8a599;

  /* removed css */
  /* float: left; */

  /* new css */
  position:fixed;
  top:0;
  left:0;
  /***********/

  width: 20%;
  height: 100%;
}

float: left; is positioned in relation to the document.

Removing float and adding position: fixed; will position the element in relation to the window.

Then you can add top, bottom, left or right to suit your needs

I forked your fiddle for an example Here

Some more information on float W3 CSS Float

Some more information on position W3 CSS Position