Footer bottom of the screen

问题:

I found a lot of articles about this subject but none off it will work for me, i want to make a footer that's on the bottom of the screen when the content isn't large enough, but when the content is longer than the screen that my footer stays under the content and doesn't stick at the bottom of the screen.

Thanks in advance!

回答1:

Here is just another example how to do it, works fine in all browsers AFAIK. http://peterned.home.xs4all.nl/examples/csslayout1.html

Edit: I am not the author, just looked myself for something like that some time ago.

回答2:

It's actually quite easy to do this just with CSS, though there are some minor restrictions. Here is a demo of how it's done (view source to get the code):

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

Here is a detailed explanation of how it works, in case you need it:

http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1239966#post1239966

回答3:

EDIT: Try CSS Sticky Footer: it is nice and CSS-only.

If you want to experiment, absolute CSS position property could also work. Checkout MDN docs:

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

回答4:

-- do it by javascript

-- example

<div class='content'>
  your page
</div>
<div class='Footer'>Footer</div>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 var document_height = $(document).height();
 var content_height = $('.content').height();

 if (content_height < document_height) {
    $('.content').css('height', (document_height));
 }
</script>