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: 377
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