Question

Is it possible to stack three DIVs vertically and have just the middle div scroll vertically? I don’t want to use pixel heights, though, because the DIVs are inside of a dialog box that is resizeable. Something like this (pardon my lousy ASCII art):

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|  Footer   |
+-----------+

The goal is to have the header and and footer fixed and, as the dialog grows, the middle div would grow vertically. Maybe I’m just being stupid, but I’ve been fighting this for the last few hours and can’t seem to get it right. The three DIVs probably need to be inside “another” DIV but when I do that, and set the height to 100%, it grows as the middle DIV grows. Again, it’s probably something silly I’m not accounting for. I’ve also tried using a TABLE to no avail.

Thanks for any help.

Answer 1

This should work

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
</div>

---

Edited – For fixed position header and footer in modal dialog

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;">
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
    </div>
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
    </div>
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
    </div>
</div>