Forcing Footer Stay At The Bottom?_问答_开发者

开发者 https://www.devze.com 2023-04-11 17:29 出处：网络

I have no containers, no wrappers. I simply have a layout like so... <body> <div id=\"header\">

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, 开发者_C百科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!

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.

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?

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

Cross browser, and always works :)