Menu
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.
584
Revisiting this for 2017. With flexbox, this can now be done without having to explicitly define the height of the header and footer. This works, at least prefixed, in all browsers that currently have any significant market share except IE <=10, which still has 1-5% share depending who you ask. Because this is generally a visual/usability mechanism and does not block functionality, using flexbox for this case should at least leave your page usable for users of unsupported browsers.
All you need to do is wrap your header, content and footer in a div that has limited height (for example, by setting the height or max-height properties as long as they are not relative to a container that will grow with content). One way is for <html> and <body> to have 100% height and for the container be a direct child of body, but there are other ways. Container should have styles:
display: flex;
flex: auto;
flex-direction: column;
And apply the style to the scrollable pane:
overflow-y: auto;
If you want the scrollable pane to grow so all vertical space is used:
flex-grow: 1;
and on the header and footer (necessary for Safari and IE 10):
flex-grow: 0;
https://jsfiddle.net/ornsk10a/
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
