Positioning: placing a footer ALWAYS in the bottom of the window.

Is it possible to use CSS to place a footer always in the bottom of the window, regardless the size of the text?

When the text is long and I have to scroll down the page to see its end, the footer will be naturally in the bottom of 
the window.

But, when the text is short, the footer will come right after it and will be placed in near the top or middle of the 
window (depending on the size of the text).

In fact, I'd like to use CSS to put the footer in the bottom of the window only when the text is short and do nothing 
when the text is long (the footer would be in the bottom by itself).

Is there a solution for this problem? I don't want to use dynamic HTML to perform it. Is it possible to use solely 
CSS?

I have an answer for my question but it's not exactly what I'm looking for and I'm afraid it's not legal usage of CSS. 
See the code (and the tests results) below.

Thanks,

Roberto (Brazil)

P.S: I apologize for my english mistakes. English is not my native language.

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Go down, footer!</title>
<style type="text/css">
body { font: 12pt arial, sans-serif }
hr { border-style: dashed; height: 1pt; color: red; background-color: white }
.i-said-down { height: 90% }
/* Warning: there's not one percentage suitable for all browsers and screen resolutions, so the footer will not be 
positioned EXACTLY where it has to when using different systems.*/
</style>
</head>
<body>
<!-- Attention! DIV encloses everything but the footer -->
<div class="i-said-down">
<!--  First test: short text - Remove comments markup below and load the document. -->
<!--
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
-->
<!--  Second test: long text - Remove comments markup below and reload the document. -->
<!--
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
<p>Line<br>Line<br>Line<br>Line<br>Line</p>
-->
</div>
<!-- Your majesty, the footer - Start -->
<hr>
<address>
Last modified: April, 21 2001 - Contact: <a href="mailto:me@home.com">Webmonster</a>
</address>
<!-- Your majesty, the footer - End -->
</body>
</html>

---

Results of the tests:

Does it work when...

- The text before footer is short? (1 paragraph, 5 lines; or short enough to avoid scrolling)

Internet Explorer 5.5: Yes, it works almost (see warning above in the code) as intended to.
Opera 5.10: Yes, it works almost (see warning above in the code) as intended to.
Netscape 4.73: No, nothing happened.
Netscape 6.01: No, nothing happened.

- The text before footer is long? (10 paragraphs, 50 lines; or long enough to demand scrolling)

Internet Explorer 5.5: Yes, it works as expected to (actually, no style is required to do that!)
Opera 5.10: No, the footer text is mixed up with the rest of the text. The footer seems to have been marked 
"position: absolute".
Netscape 4.73: Yes, it works as expected to (actually, no style is required to do that!)
Netscape 6.01: Yes, it works as expected to (actually, no style is required to do that!)

Notes:

- All browsers for Windows 95/98.
- Screen resolution: 800 x 600.

Received on Sunday, 22 April 2001 02:57:03 UTC