Making HTML content expand to fill the window

Asked 15/2, 2009 at 16:42 Answered 15/2, 2009 at 17:3

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?

Margy answered 15/2, 2009 at 16:42 Comment(0)

Using the height: 100% CSS attribute should make it work.

See if Dave Woods 100% Height Layout Using CSS works for you.

Euphemism answered 15/2, 2009 at 16:58 Comment(1)

Part of this is useful - I didn't know you could put width and height on the style of the <HTML> element - I was wrapping everything in a top-level DIV with absolute positioning. Now I just need a way to say "give the header/footer/form their minimum space and give all the rest to the scroll pane". – Margy 15/2, 2009 at 17:14

It's a little known aspect of the position: absolute; CSS property that will give you the layout you are looking for. You can absolutely position an element in ALL 4 directions, top, right, bottom and left. This means a box can be as fluid as the browser and always remain the same distance away from the edges of it's container that you specify.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

For an example check out http://www.sanchothefat.com/dev/layouts/cssframes.html and then view source and pull apart the CSS to see how it's done in a more complex example.

If you take this approach you have to absolutely position ALL the main container <div>s. Use ems if font-size is a concern.

PS. There is a gotcha in that IE6 messes up (shock!) however the example I have provided has an IE6 fallback. Just a fixed height will be fine though.

Pilotage answered 15/2, 2009 at 17:3 Comment(3)

I think this is the same as my option #2 – Margy 15/2, 2009 at 17:8

yeah sorry i didn't quite follow at first, editing my answer to suit better – Pilotage 15/2, 2009 at 17:10

I think it's your best option as you state your header and footer are fixed height. Otherwise if you don't want to use javascript you'll have to use a fixed height area for the diagram. – Pilotage 15/2, 2009 at 17:17

Recommended topics

Hot tags