Update: This post is way out of date now – do yourself a favour and look into using something like twitter bootstrap
A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML5 Document with a sticky footer</title>
<style>@import "css/reset.css"; </style>
<style>@import "css/main.css"; </style>
</head>
<body>
<div id="root">
<header>
The page header
</header>
<section>
<h1>Example</h1>
<p>This is an example HTML document.</p>
<p>Put your content here</p>
</section>
</div>
<footer>
Sticky footer
</footer>
</body>
</html> |
html { background: #CCC; height: 100%; } body { background: #FFF; width: 600px; margin: 0 auto; height: 100%; } body > div#root { height: auto; min-height: 100%; } div#root { height: 100%; } header { background: #EFF; display: block; height: 100px; } footer { background: #FEF; display: block; height: 100px; /* set the footer height */ margin-top: -100px; /* match footer height */ } section { background: #FFE; display: block; padding-bottom: 100px; /* match footer height */ } |
Note i have also imported my reset CSS.
If you want a header and footer background image to stretch across the page, consider using CSS3 multiple background images. Otherwise you will need to create and inner wrapper for each section.
Awesome.
I’ve been using Steve Hatchers solution, but I always seem to get irresolvable layout bugs with Steves code when using an HTML5 doctype.
Thanks
I tried copying your files and the middle section won’t strech down all the way to the bottom neither in Firefox4 or in Chrome 11. Also why do you use xmlns=”http://www.w3.org/1999/xhtml for a html5 page. Doesn’t that tell the browser it’s xhtml?
reset-css has diappeared.
I lost those links some time ago…. and this post is now way out of date. Do yourself a favour and look into bootstrap or something similar.