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.
StickyFooter.html

<!DOCTYPE html>
<html>
<head>
 <title></title>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
 <link rel="Stylesheet" href="../System/reset.css" />
 <link rel="Stylesheet" href="StickyFooter.css" />
</head>
<body>
<div id="wrap">
 …
 <div id="footerMargin"></div>
</div>
<footer id="stickyFooter">
 …
</footer>
<script type="text/javascript" src="StickyFooter.js"></script>
<!--[if lte IE 7]><script>StickyResize();</script><![endif]-->
</body>
</html>

StickyFooter.css

/* extract from reset.css */
* {margin:0;box-sizing:border-box;}
html, body {height:100%;}

/* sticky */
#wrap {
    min-height:100%;
/* 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 - oRect.top).toString() + "px";
    $("footerMargin").style.height = sHeight;
    $("wrap").style.marginBottom = "-" + sHeight;
}

Code reuse

prettify

baseline

HTML5 Sticky Footer

1 comment: