Question

I’m designing a webpage that will fit entirely within the browser window, so scrolling is hidden.

I have a headerbar at the top of the page of width 100% and height 40px. Beneath the headerbar I have a navigation bar of width 15% on the left side of the page, and a content area DIV of width 85% on the right side of the page.

I cannot get the height of the navigation bar and the content area to dynamically extend to the bottom of the page and no further. What is the best way to make both the navigation bar and the content area extend to the bottom of the page in all screen sizes?

For reference, my HTML code looks like:

<div id="headerBar">Header Bar</div>
<div id="navigationBar">Navigation Bar</div>
<div id="contentArea">Content Area</div>

and my CSS code looks like:

#headerBar{
    width:100%;
    height:40px;
    background:rgb(35,35,35);
}

#navigationBar {
    width:15%;
    height:100%; /* Note that this doesn't work */
    background:red;
}

#contentArea {
    width:85%; /* if I use any padding or margin this box exceeds the browser width */
    background:blue;
    height:100%;  /* as with #navigationBar, this doesn't work */
    float:right;
}

+1 to any solutions! Thanks in advance!!

Answer 1

If you really, really want to have a layout like this, you can do it with position:fixed;:

#headerBar {
    background:rgb(35,35,35);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
}
#navigationBar {
    background:red;
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 15%;
}
#contentArea {
    background: blue;
    position: fixed;
    top: 40px;
    right: 0;
    bottom: 0;
    width: 85%;
}

However, I do not recommend it. It will cause severe problems with small screens etc.