HTML5 Sticky Footer

Table layouts are fine for the nonconformists among us.
But there are cases we realy need a CSS layout. Like when we have to rearrange the layout depending on the window size of the browser, to accommodate everything from mobile browsers to extra wide monitors.
Here is a Sticky Footer CSS layout.
<!DOCTYPE html>
<!--[if lte IE 8]>
<script src="">
 <link rel="Stylesheet" href="../System/reset.css" />
 <link rel="Stylesheet" href="StickyFooter.css" />
<div id="wrap">
 <div id="footerMargin"></div>
<footer id="stickyFooter">
<script type="text/javascript" src="StickyFooter.js"></script>
<!--[if lte IE 7]><script>StickyResize();</script><![endif]-->
/* extract from reset.css */
* {margin:0;box-sizing:border-box;}
html, body {height:100%;}

/* sticky */
#wrap {
/* ie6: height:auto !important; height:100%; */
#footerMargin, #stickyFooter {clear:both;}

/* footer height */
#wrap {margin-bottom:-10em;}
#stickyFooter, #footerMargin {height:10em;}
StickyFooter.js (Needed only if you don't know the exact height of the footer)
var $=function(sId){return document.getElementById(sId);};
window.onload = function () {
    $("stickyFooter").onresize = StickyResize;
function StickyResize() {
    var oRect = $("stickyFooter").getBoundingClientRect();
    var sHeight = (oRect.bottom - + "px";
    $("footerMargin").style.height = sHeight;
    $("wrap").style.marginBottom = "-" + sHeight;

1 comment: