Three vertically stacked DIVs with scrolling middle

Posted by Dave on Stack Overflow See other posts from Stack Overflow or by Dave
Published on 2010-06-10T02:25:07Z Indexed on 2010/06/10 2:32 UTC
Read the original article Hit count: 337

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css