21Jul Making footer stick to the bottom of the page

Problem for today, had a background which was applied on body which meant that the background titled all the way to the length of the document. The page had a footer which would appear where the content would end, which would make the background appear below the footer and make it look like something had gone wrong there.

Obviously a comment problem for people who wants to have a coloured footer and a fancy background. So here’s the solution I applied, after looking at the solutions available.

The markup.

1
2
3
4
5
6
7
8

<div id="container">
    <div id="content">
        foo
    </div>
</div>
<div id="footer">
    content for footer
</div>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html {
     height:100%
}
body {
     height:100%
}
#container {
     position:relative;
     min-height:100%;
     _height:100%; /* for IE6 as it doesnt understand min-height */
}
#content {
     padding-bottom:100px; /* assuming your footer height is 100px */
}

#footer {
     position: relative;
     margin-top:-100px;
     /* move the footer up negatively exactly the same height
         as the footer so that its back in the view and always
         appears to rest at the bottom
         of the page */
}

Here’s what it looks like.

A relatively straightforward solution, the only slight problem with this is that you would require to know the height of the footer well in advance which means you cant have dynamic content for the footer. If I come across a problem like that and have to figure out a solution for that, I shall post it here.

Credits: http://www.themaninblue.com/writing/perspective/2005/08/29/

Tags: CSS, hacks