|
| |
|
|
Tailslide
Posts: 6270
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
 |
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;}
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
|
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
