|
Tailslide -> Footer at bottom of Viewport (8/30/2005 7:54:04)
|
It's always been a bit fiddly getting a footer to stick at the bottom of the viewport rather than follow straight on from the rest of the contents in the normal document flow.
The previous solutions which included positioning the footer absolutely tended to wreak havoc when the page was re-sized. Or included Javascript.
There's a nice, neat CSS way of doing this now, thanks to the Man in Blue.
The HTML page layout (simplified obviously):
<html>
<body>
<div id="nonFooter">
</div>
<div id="footer">
</div>
</body>
</html>
The relevant CSS:
html {height: 100%;}
body {height: 100%;}
#nonFooter {position: relative;min-height: 100%;}
* html #nonFooter {height: 100%;}
#footer {position: relative;margin-top: -7.5em;}
|
|
|
|
