Stylesheets - Middle div with flexible height

Author

Middle div with flexible height

Krzysztof Maczyñski

2007-07-21, 6:16 pm

I've got something like this:
<body>
<div/>
<div/>
<div/>
</body>
The first and third divs have intrinsic heights, not necessarily
known. I want them aligned with the top and bottom of the viewport,
respectively. I want the second div to occupy the full remaining
height in the viewport. In case of overflow, ideally the whole body
should become srollable, but scrolling only the second div is also
acceptable. I care for IE6 (older versions not necessarily), but I
want full standard compliance (hacks allowed), without resorting to
scripts or modifying the document structure. Can anybody, please,
share some ideas with me?

Ben C

2007-07-22, 6:16 pm

On 2007-07-21, Krzysztof Maczyñski <1981km@XXXXXXXXXX> wrote:
> I've got something like this:
><body>
><div/>
><div/>
><div/>
></body>
> The first and third divs have intrinsic heights, not necessarily
> known. I want them aligned with the top and bottom of the viewport,
> respectively. I want the second div to occupy the full remaining
> height in the viewport.

i.e. the three divs are basically "header", "content", "footer"?

> In case of overflow, ideally the whole body
> should become srollable, but scrolling only the second div is also
> acceptable. I care for IE6 (older versions not necessarily), but I
> want full standard compliance (hacks allowed), without resorting to
> scripts or modifying the document structure. Can anybody, please,
> share some ideas with me?

If the footer div has unknown height, like you say, then there's no
sensible solution apart from using a table, with height: 100%.

Using tables for layout is frowned upon though. I think trying to latch
things to the bottom of the viewport is always asking for trouble. If
you lose that requirement then it's all very easy and you don't need a
table.

The table looks something like this:

<style type="text/css">
body, html { height: 100%; margin: 0; }
table
{
height: 100%;
width: 100%;
}
</style>

<table cellpadding="0" cellspacing="0">
<tr style="height: 1px">
<td>header</td>
</tr>
<tr>
<td style="vertical-align: top">
content
</td>
</tr>
<tr style="height: 1px">
<td>footer</td>
</tr>
</table>