tags:

views:

1677

answers:

2

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?

+3  A: 

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

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

Michael Glenn
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".
finnw
+1  A: 

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.

sanchothefat
I think this is the same as my option #2
finnw
yeah sorry i didn't quite follow at first, editing my answer to suit better
sanchothefat
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.
sanchothefat