Full page layout in HTML with scrolling center - html

Question

I have a requirement to produce a HTML layout as follows:
The page should flow to occupy the available space in the browser window
It should have a fixed height header and footer
The central area should occupy the remaining height
The central area is broken into three columns. Each of these colums should be independently scrollable should the content exceed the available area.
I've had a go at this using a table of height 100% (works eventually with a bit of tweaking) with the top and bottom cells having fixed heights. This leaves the central area to occupy the remaining space. This area contains another table with three columns. Each cell contains a div with height and width set to 100% and overflow set to auto. It seems like it should work but excess content simply causes the main table to extend its height so that the whole page becomes scrollable.
Does anyone know of any examples of this working in practice? The solution is expected to be reasonably cross browser but doesn't have to cover every corner case.
Thanks,
Phil
Update
I figured out a solution and posted it as an answer here.

Answer 1

Note: I'm assuming HTML5 and CSS3 here, but kept to properties that work in most browsers. The HTML5 can easily be exchanged for HTML 4.01.
To create the kind of layout you want, we start with some basic HTML:
<div id="wrapper">
<header> Header </header>
<div id="content">
<section id="left"> Left </section>
<section id="center"> Center </section>
<section id="right"> Right </section>
</div>
<footer> Footer </footer>
</div>
The difficulty is styling this according to your needs. Starting out by setting a 100% height on as much as possible, along with suitable overflow values, we can obtain something very close to what you want:
html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { height: 100%; }
header, footer { height: 50px; }
#content { height: 100%; overflow: hidden; }
section { float: left; overflow: auto; height: 100%; }
#left, #right { width: 100px; }
#center { width: 300px; }
Unfortunately, this makes the layout exactly 100px (the combined height of footer and header) too tall. To remedy this, we must decrease the height of #content by the same amount, but the standard box model doesn't allow for this. Enter the box-sizing (which is supported by all major browsers except IE7), which we can use to change the box model being used. With the border-box box model, padding is included in the height and as such we can "remove" the necessary height from #content:
#content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 50px 0; margin: -50px 0; }
See also this JSfiddle demo and the full screen result for further details.

Answer 2

There are several examples of this type of layout available. One of the best is Matthew Levine's "Holy Grail," complete with tutorial.
You will note that this layout does not fix the footer at the bottom of the screen. You can do this by setting body (or an all-encompassing div) height to 100% and using overflow:hidden but this introduces potential usability issues. You may find that it is best to let your page expand to correct height as needed.

Answer 3

I figured out a solution, it's not elegant but it does work. I created a table set to 100% height. I then added a function which executes on load and resize. This gets the height of the window and subtracts from it, the height of the header and footer, it then sets the height of a div in the central area to be that remaining height. The main difficulty was coming up with an accurate window height, through various bits of googling, I came up with the following which appears to work fine:
function getWindowHeight() {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
return height;
}