Table-based Sticky Footer

HTML

<div id="wrapper">
    <header><div>Head</div></header>
    <article><div>All &lt;div&gt;s are ugly helpers</div></article>
    <footer><div>Foot</div></footer>
</div>

CSS

html, body {height:100%; margin:0; padding:0}
#wrapper {display:table; width:100%; height:100%}

/* ugly helper-css */
#wrapper > * {display:table-row}
#wrapper > * > div {display: table-cell; padding:1ex}
/* /ugly helper-css */

header  {background-color:blue;}
article {background-color:red;height:100%}
footer  {background-color:green}