Stick a Footer to the Bottom – HTML5
by admin on December 29, 2011
Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.
<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>
document.createElement("footer");
document.createElement("header");
</script>
<![endif]-->
<style>
body, html{ height:100%; margin:0; }
.wrapper{ min-height:100%; }
header{ height:100px; background:#CCC; overflow:auto; display:block; }
.content{ padding-bottom: 100px; }
footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }
</style>
</head>
<body>
<div>
<header><p>This is my header!</header>
<div><p>This is my content!</p></div>
</div><!--end wrapper-->
<footer>This is my footer!</footer>
</body>
</html>
One comment
[...] PLEASE NOTE: This technique has been updated & streamlined for HTML5. Click here for the updated post [...]
by How to Stick a Footer to the Bottom with CSS | Web Design Dundalk by Conor Darcy on January 5, 2012 at 2:14 pm. #