By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,463 Members | 771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,463 IT Pros & Developers. It's quick & easy.

Adjust height base on the the height of the browser window.

P: n/a
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.
THX

Oct 20 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 2006-10-20, Q. John Chen <qj****@email.comwrote:
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;
}
Oct 20 '06 #2

P: n/a
Tried on IE and it does not work either.

When I tried div.footer, Then there is another problem when there are
too many content in the middle.

Thanks

John

Oct 23 '06 #3

P: n/a
On 2006-10-23, Q. John Chen <qj****@email.comwrote:
Tried on IE and it does not work either.

When I tried div.footer, Then there is another problem when there are
too many content in the middle.
Do you mean the way div.footer ends up on top of the content? And then
when you scroll up, it moves up with the page.

It sounds like what you want is a footer at the bottom of the viewport
if the body height is less than the viewport height, but at the bottom
of the content area if it is.

I can't think of a way to do this without scripting. You could try this,
and if it's what you want then Google for the IE equivalents for DOM 0
things like window.innerHeight.

<script type="text/javascript">
function placeFooter()
{
var body = document.getElementsByTagName("body")[0];

if (body.offsetHeight window.innerHeight)
{
var footer = document.getElementById("footer");
footer.style.bottom = "auto";
}
}
window.onload = placeFooter;
</script>
<style type="text/css">
#footer
{
position: absolute;
background-color: red;
color: yellow;
bottom: 0px;
}
</style>
</head>
<body>
content
...
<div id="footer">
footer
</div>
....
Oct 23 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.