Forcing Footer Stay At The Bottom?

Question

I have no containers, no wrappers.

I simply have a layout like so...

<body>

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

<div id="left">
</div>

<div id="right">
</div>

<div class="clear"></div>

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

What I am wanting to do is to make sure the footer always stays at the bottom of the screen whether I have content that goes pretty far down and or even not enough content to go all the way to the bottom of the screen.

As of right now, I can get either two of the ways listed above to work, but I want both to work.

Here is the CSS I have set-up for this.

html {
height: 100%;
}

body {
height: 100%;
position: relative;
}

#footer {
position: absolute;
bottom: 0;
}

I am aware that if I apply a min-height: 100%; to the HTML Element within the CSS Document that will go as the content goes, but if I do not have any content, per se, it will not stick at the bottom of the screen. Resolution regardless.

I have ran into this problem multiple times, and never am quite sure how to figure it out. So, some help would be much appreciated, along with some explanation.

Thank you so much everyone for your help!

`but if I do not have any content, per se` But in the end you should have content so what does it matter. Really no one cares about your footer being stuck to the bottom versus just below the content. I don't get why people waste so much time trying to achieve such a worthless effect. — animuson, Oct 07 '11 at 15:08
@animuson: I care if it is stuck at the bottom. It would look ridiculous without the footer being stuck at the bottom with my design. Thanks for your input though. :) — Aaron Brewer, Oct 07 '11 at 15:18
possible duplicate of [How to make a footer fixed in the page bottom](http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) — Rune FS, Feb 26 '13 at 10:21

score 8 · Accepted Answer · answered Oct 07 '11 at 15:34

use this mate, it's a really well explained and easy to follow tutorial:

http://code.google.com/p/cleanstickyfooter/

Best sticky footer ever works really really well

Quote from the site (and I agree completly):

The Difference

Google "sticky footer", I have listed below why this technique works better than the top results from this search.

http://ryanfait.com/sticky-footer/ - This technique is similar, but cleanStickyFooter takes it much further. The technique located here doesn't play nicely when you want to make your footer have a width of 100%.

http://www.cssstickyfooter.com/ - This technique is one out of many I am referring to when I say its invasive with CSS clearing hacks.

score 0 · Answer 2 · answered Oct 07 '11 at 15:32

0

Do you want the footer to be attached to the bottom of the content whatever the amount of content, or at the bottom of the screen whatever the amount of content?

If the first, don't bother positioning it - let it go with the page flow after the content.

If the second, use position: fixed

You may need to be a little more clear. What scrolls? Header? Left? Right? Footer? Are Left and Right part of your overall content? Why is your Body positioned relative? Why do you have a "height: 100%;" for html?

answered Oct 07 '11 at 15:32

Ben

29
2

I want the footer to be attached at the bottom of the content and the bottom of the content and if there is not enough content for it to flow to the bottom of the screen, I still want it stuck at the bottom of the screen, does that make sense? I do not want to do a fixed position because that way it will stick to the bottom of the screen regardless of the amount of content I have, and in which would require and margin and or padding applied to one of the content divs. Left and Right are the content, more so Right. – Aaron Brewer Oct 07 '11 at 15:39

score 0 · Answer 3 · answered Oct 07 '11 at 15:35

0

You can take a look at the layout specified in this Artice by RyanFait

Cross browser, and always works :)

answered Oct 07 '11 at 15:35

Ryan

3,715
2
20
17

From Google above... http://ryanfait.com/sticky-footer/ - This technique is similar, but cleanStickyFooter takes it much further. The technique located here doesn't play nicely when you want to make your footer have a width of 100%. – Aaron Brewer Oct 07 '11 at 15:42

Forcing Footer Stay At The Bottom?

3 Answers3