Question

I am looking for two divs that look like this:

<div style="height:20px;" />
<div style="height:100%;" />

This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn’t there a much easier way to do this that will work in all browsers?

Answer 1

#div1 {
    height:20px;
    position:fixed;
    top:0px;
    right:0px;
    left:0px;
} 
#div2 {
    position:absolute;
    top:20px;
    bottom:0px;
    right:0px;
    left:0px;
}

maybe this is what you need..

EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like

<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>