Forcing Footer Stay At The Bottom?

Asked 7/10, 2011 at 15:5 Answered 7/10, 2011 at 15:35

Solved html css height footer sticky-footer

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!

Catchascatchcan answered 7/10, 2011 at 15:5 Comment(3)

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. – Deppy 7/10, 2011 at 15:8

@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. :) – Catchascatchcan 7/10, 2011 at 15:18

possible duplicate of How to make a footer fixed in the page bottom – Ro 26/2, 2013 at 10:21

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.

Opalescent answered 7/10, 2011 at 15:34 Comment(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?

Matti answered 7/10, 2011 at 15:32 Comment(1)

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. – Catchascatchcan 7/10, 2011 at 15:39

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

Cross browser, and always works :)

Bebeeru answered 7/10, 2011 at 15:35 Comment(1)

From Google above... 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%. – Catchascatchcan 7/10, 2011 at 15:42

Recommended topics

Hot tags