CSS layout that fills available space
- by Jared I
I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall.
I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things)
I'd like to have:
A heading with a fixed height
A footer with a fixed height
Left sidebar with a fixed width
Right sidebar with a fixed width
The whole layout always fills the entire viewport (i.e. if the user resizes the window, the layout grows to the new size)
Put another way:
|< Total width is 100% of viewport >|
+--------------------------------------------------------------+ ---
| Header with a fixed height | ^
|--------+-------------------------------------------+---------+
| | | |
| | | |
| Left | | Right | Total
| with | Center grows in height/width | with | height
| fixed | and has scrollbars if necessary | fixed | is
| width | | width | 100%
| | | | of
| | | | viewport
| | | |
|--------+-------------------------------------------+---------|
| Footer with a fixed height | v
+--------------------------------------------------------------+ ---
The parts that are giving me the most trouble are
Having the sidebars and center have a height equal to the height of the viewport minus the heights of the header and footer
Having the center have a width equal to the width of the viewport minus the widths of the two sidebars
I have no problem requiring users to have a modern browser.
I'm aware that similar questions to this have been asked before, such as
Make a div fill remaining space (http://stackoverflow.com/questions/1717564)
Three row tableless CSS layout with middle row that fills remaining space (http://stackoverflow.com/questions/1703455)
Create 2 divs, one takes up remaining space (http://stackoverflow.com/questions/1717564)
... and the conclusion seems to be that there isn't a good solution. Those answers are somewhat old, so I'm hoping that someone knows the trick now.
