...">
Geek Answers Handbook

Forcing a footer at the bottom?

I have no containers, no wrappers.

I just have this layout ...

<body> <div id="header"> </div> <div id="left"> </div> <div id="right"> </div> <div class="clear"></div> <div id="footer"> </div>

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

As of now, I can use both of the above methods, but I want both of them to work.

Here is the CSS that I installed for this.

 html { height: 100%; } body { height: 100%; position: relative; } #footer { position: absolute; bottom: 0; }

I know that if I apply min-height: 100%; to the HTML element in the CSS document, which will be displayed by the content, but if I don’t have any content, it will not stick at the bottom of the screen. Resolution is independent.

I ran into this problem several times and never know how to figure it out. So some help would be greatly appreciated, as well as some explanation.

Thank you so much for your help!

+8
html css height footer sticky-footer
source share
3 answers

use this helper, it is really well explained and easy to follow the tutorial:

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

Best sticky footer really works really well

Quote from the site (and I completely agree):

Difference

Google's “sticky footer”, I have listed below why this method works better than the best results of this search.

http://ryanfait.com/sticky-footer/ - This method is similar, but cleanStickyFooter takes it much further. The technique located here doesn't play well if you want your footer to be 100% wide.

http://www.cssstickyfooter.com/ - This method is one of many that I mean when I say that it is invasive with CSS hacker hacks.

+8
source share

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

If the first, do not bother to position it - let it go with the stream of the page after the content.

If the second, use the position: fixed

You may need a little more clearly. What are the scrolls? Heading? Left? Correctly? Footer? Is there a left and right side of your shared content? Why is your body relatively located? Why do you have "height: 100%"; for html?

0
source share

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

Cross browser and always works :)

0
source share

More articles:


All Articles