Sticky footer

HTML & CSS
1

Hey guys,

I’m trying to make my footer stick to the bottom of the page. I know, I know there are milions of tutorials on google… believe I’ve gone through most of them. Problem I have is that as soon as I set my html, body to height 100% I automatically get a scroller and the footer gets pushed way down even though there is no content. I’ve tried doing negative margins but that only pulls the footer higher and the scroller still stays the same, with empty space after the footer. Here is my code:

CSS:

html, body {height: 100%;}

div#container {min-height: 100%; margin: 0px auto 0px;}

div#footer{background: #333;height: 140px; position:relative; margin: 0px auto 0;}

HTML:

<body>
<div id=“container”>
<p>text1</p>
</div>

<div id=“footer”>
<p>text2</p>
</div>
</body>

Any help would be greatly appreciated. This is my second day trying to figure this out, so thanks in advance.

2

Hi, that’s because for 1, you dont reset the margins/paddings on the body.

So it will be 100% height+that

Second, you don’t use proper technique. Try this (untested)

html, body {height: 100%;margin:0;padding:0;}

div#container {min-height: 100%; margin: -140px auto 0px;}
#header{border-top:140px solid transparent;}
div#footer{background: #333;height: 140px; position:relative; margin: 0px auto 0;}

HTML:

<body>
<div id="container">
<div id="header">
<p>text1</p>
</div>
</div>

<div id="footer">
<p>text2</p>
</div>
</body>
3

Hi xismo, Welcome to SitePoint! :slight_smile:

The code Ryan posted is the basic structure for Sticky Footers but it did not include the fixes for IE8 and Opera. They both suffer from a min-height:100% bug which causes the footer to hang when the viewport is resized.

For a complete explanation have a read through Paul’s article at search-this.com.
http://www.search-this.com/2009/10/09/css-a-sticky-subject/

You will also find the updated method in the FAQs
How do you put a sticky footer at the bottom of the window?

Here are some live examples with the cross browser fixes in place.

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
http://www.css-lab.com/demos/stickfoot/stickfoot-1.html

4

Thanks guys for your replies. Finally after two days I got. Your examples helped although I tried something similar before. The thing with my site is that it 's runnning on a custom wordpress theme and there is a lot of margins and paddings. Problem was that I had to not just subtract the height of the footer, but all of the margins included in all the elements + the height of the header. So thanks again for your help.

Do any of you guys have some experience with WP? What would be best way to have the footer stick to the bottom of all the pages. e.g header.php, index.php, and all etc. I know I could just have each page wrapped but wondering if there’s maybe a smarter solution for it.

5

The solution we gave is the only full proof solution to a sticky footer. You’d need the CSS we gave.

The #header element I added isn’t really needed. You just need to target the first child in the #container elemen and give that the top border :slight_smile: