Sticky Footer

[Bob]

Hello all,

Although I’ve searched the forums for this (which brought up hundreds of posts) and have read through here and here, I can’t really seem to find the answer to my question. I’m wondering why there’s a div with a class of push needed to make the sticky footer thing work.

Here’s the code I’m using:

test.html

Code:

Here goes content.

This is a sticky footer

style.css

Code:

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}

.footer, .push {
height: 150px;
}

But it seems to work fine when I remove the line:

Code:

So, why is that div really needed? What does it do? I can’t figure it out; when I take a look at it with Firebug its just an empty div of 150px.

[noahgelman]

What it does is it creates an empty space for the footer to stay in and keep it at the bottom. If you remove it, that space is gone so it doesn’t work. It’s also why the html, body, and wrapper have to be at 100% with the wrapper having the same negative margin as the height of the push and footer. It’s just how it all comes together.

It’s like a clock. You don’t know that all the gears do but they have a purpose. You don’t just take one out and ask why it doesn’t tick anymore.

[Bob]

Yeah, I figured something like that, but the weird thing is, when I remove that div, the footer will still stick at the bottom. Hence my question, what does it do and why is it required, if it works fine without it?

[noahgelman]

Does it work in all browsers? It’s probably a compatibility issue for IE 6 or 7 or something

[virtual]

It might depend on how much info you have on your page. If you have a lot the footer will be at the bottom, if you have very little you might end up with the footer halfway up the page.

[Bob]

"noahgelman" wrote:

Does it work in all browsers? It’s probably a compatibility issue for IE 6 or 7 or something

Works fine in IE6/7, as well as Firefox and safari.

"virtual" wrote:

It might depend on how much info you have on your page. If you have a lot the footer will be at the bottom, if you have very little you might end up with the footer halfway up the page.

Nope, it works fine with even just 1 sentence in my page (see the example in my first post), so that shouldn’t matter.

[virtual]

Ah ha, that is indeed strange.
If you remove the "push" from the html the footer still sticks to the bottom, however if you remove .push from the css it no longer does. I don’t get it .

[noahgelman]

?

Really? Link to page?

[virtual]

I just copied his html and css to a page and tested locally.

[Bob]

@virtual: I just tried that, but there doesn’t seem to be a difference to me. When I remove the push div from the html, it still works, and when I remove the push class from the css, it also still works.

@noahgelman: Sorry, don’t have anything live on the web, I work local.

Still, this is really weird to me…

EDIT:
I found the solution! Apparently, you need the push div to make sure the sticky footer works when there’s a lot of content on your page. Try adding this

Code:

.wrapper p {
background-color: red;
height: 1000px;
}

to the css file, while still having that push div and push class in the html/css. Now, when removing that div/class you will see the footer is actually inside the .wrapper div (note that the background-color is only added to see the change).

[Author]

Posts