How to Achieve 100% Height Plus Footer Using CSS

April 15th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

View a Demonstration

I remember a couple of years ago, before I used CSS to structure my website layouts, achieving 100% height with tables and getting a footer to stick to the bottom of the page was a nightmare. No matter how many forums or articles I read, it never seemed to be an easy task.

Now those days are behind me (phew!) I wanted to share with you how I now go about structuring my layouts with CSS so that the footer of a page always remains at the bottom and reacts accordingly with the amount of content on the page above it.

First, lets create our HTML layout:

<div id="outer">

    <div id="container">

        <div id="header">HEADER</div>

        <div id="content">
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT
        </div>

    </div>

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

</div>

The layout we’ve built contains a header, an area for content and sticky footer. Now that’s done let’s move onto the CSS to bring it to life:

html, body { height:100%; margin:0; color:#000; }

#outer { width:100%; min-height:100%; position:relative; }

#container { width:100%; padding-bottom:40px; display:table } /* padding-bottom = The footer height */

#header { height:50px; background-color:#0C0 }

#content {  }

#footer { position:absolute; bottom:0; width:100%; height:40px; clear:both; background-color:#C00 }

That’s it. A very simple way to keep the footer of your website at the bottom of the page. View the demonstration to see how our new layout looks.

This entry was posted on Thursday, April 15th, 2010 at 9:18 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments (0)
Comments are closed.