Make navigation bar take up entire page height in css

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

Answer 1

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/