Making HTML content expand to fill the window
I have an HTML page divided vertically into
- Header
- Body
- Footer
The body in turn is divided horizontally into
- A large DIV on the left surrounded by scrollbars, displaying a portion of a diagram
- A form on the right
The header and footer are fixed-height. The body should expand vertically to fill the portion of the window not occupied by the header and footer.
Similarly the form is fixed-width and the scroll pane should expand horizontally to fill the window width.
The diagram is very large (up to 10x10 screenfuls) so I cannot display all of it. Instead I want to display as much as possible (using the whole window) so that the user needs to scroll as little as possible.
I also cannot use javascript, because some users are necessarily paranoid and must disable it.
Some options I have considered:
- A table with the scroll pane cell's width and height set to 100% and all others to 1%
Doesn't work. The table (and hence the page) expands to contain the entire diagram, even with absolute positioning on the scroll pane DIV. - Absolute positioning to offset the pane from the bottom of the page by the height of the footer
Works but inaccurate: the footer's height depends on the current font size and whether text is wrapped. This means I must leave a large margin to ensure they do not overlap. - Place the diagram in an IFRAME
The best solution I've found with scripts disabled, but limits what I can do in scripts when they are enabled.
I notice that Google Maps uses a fixed-size area for the map when scripts are disabled. If Google has given up on this problem does that mean it's not feasible?
Answer
Using the height: 100% CSS attribute should make it work.
See if Dave Woods 100% Height Layout Using CSS works for you.