On 2007-07-21, Krzysztof Maczyński <1981km RemoveThis @gmail.com> 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>
Search
