How can I make DIV 100% height of browser without vertical scrolling of header

Question

Both the left and right panels have a height of 100%, but since the Header div takes up X amount of space, there is some vertical scrolling in the window th

Answer 1

You could use a "faux columns" type of structure -- adding the background color of your columns as "fixed" elements (they wont scroll with the page) behind your real columns.

div#left_faux {
    position: fixed;
    top:0;
    left:0;
    right:30%;
    bottom:0;
    background-color:#CCC;
}
div#right_faux {
    position: fixed;
    top:0;
    left:70%;
    right:0;
    bottom:0;
    background-color:#666; 
}

.leftpanel{
    float: left;
    width: 70%;
}
.rightpanel{
    float: left;
    width: 30%;
}

This quick example is perhaps overly verbose, for demonstration purposes. I'm sure you can streamline the CSS so there aren't so many redundant definitions.

WORKING EXAMPLE