CODEWITHSUNDEEP
htmlcsspositionfooter
Yoshi Peters
Yoshi Peters

Reputation: 196

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!

Upvotes: 1

Views: 182

Answers (4)

Ahmed Alnahas
Ahmed Alnahas

Reputation: 263

-- 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>

Upvotes: 0

Stefano Sanfilippo
Stefano Sanfilippo

Reputation: 33046

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;
}

Upvotes: 0

Cthulhu
Cthulhu

Reputation: 1372

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.

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

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

Upvotes: 0

Related Questions