|
Posted by Ben C on October 20, 2006, 5:42 pm
Please log in for more thread options
> I have a page contains a table (e.g a 3-row table). The middle row is
> for the content and the bottom row is for footer notes.
>
> When the middle row does not have much info, the footer goes way too
> high up. How can I automatically adjust the height of the middle row
> when a user re-size the browser window.
>
> Or, how can specify a minimum height so at least the footer is a
> footer?
>
> It seems to me that I can use a div. But I tried several things and
> just can get it to work.
You might think setting height: 100% on the table would work, but 100%
here means "100% of the height of the containing block", and the table's
containing block is the body (in a simple example) whose height depends
on its content. For the content to ask for a percentage of that height
is circular, so the percentage height is treated as "auto".
But if we make the table's containing block a positioned box whose
containing box is the viewport (which it is in the absence of positioned
ancestors), and whose height is 100% of the viewport, the percentages can
be resolved:
div
{
position: absolute;
height: 100%; /* of the viewport */
}
table
{
height: 100%; /* of the div, and therefore also of the viewport */
}
<body>
<div>
<table>
...
</table>
</div>
</body>
This works in Firefox and Opera but unfortunately not Konqueror. I
haven't tried IE.
An alternative is if you can make your footer itself be a div (if it
must be a table row, the div can contain a table containing the row),
then you can just put that div at the bottom of the viewport with
absolute positioning:
div.footer
{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
| 
XML Sitemap