How to code a sticky footer using the html object, in HTML and CSS?

Question

I\'m using Less Framework 4 for two websites I\'m designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.

The problem: be

Answer 1

I do not advise you to apply CSS to html element. Instead create div with similar styles. In general case your code sould be like this:

HTML

CSS

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

This works perfect in all browsers, even in IE6 :)