anchoring a footer to the bottom of the html page using css Apr

It's a common need to anchor a footer to the bottom of your web page. It's a tricky problem because you need to account for both large and small content. I've seen people suggest ass-backward ways of doing this with JavaScript. You can achieve this strictly with HTML and CSS with minimal bloat to your markup. All you need is a container div.

Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest the footer with position: absolute, bottom: 0;

/* css */
html, body {
    height: 100%;

#container {
    position: relative;
    min-height: 100%;

#footer {
    position: absolute;
    bottom: 0;

<!-- html -->

  <div id="container">
    <div id="footer"></div>

You might want to add some padding to the bottom of the container so that your content won't run under the footer.

Bookmark and Share
blog comments powered by Disqus