Div height as residual height

Question

I have two divs

<div id="uno"> text </div> <div id="due"> text </div> div#uno{ width:300px; height: 100px; border: 1px solid blue; overflow:hidden; } div#due{ width:300px; height: 200px; border: 1px solid yellow; overflow:scroll; } 

how can i have div id = "due" height equal to remaining page height?

Answer 1

Make sure you specify HTML 4.01 or XHTML 1.x or later doctype type:

 div#uno{ position:absolute; width:300px; height:100px; top:0px; border:1px solid blue; overflow:hidden; } div#due{ position:absolute; width:300px; top:100px; bottom:0px; border:1px solid yellow; overflow:scroll; }