1

I am trying to make a footer that stays on the bottom of the page, so when you scroll down it should stay there.

How can I do this the best?

PS: I do not have any code yet, I am just looking for how I can do this the best way possible.

JM8-Real
  • 43
  • 2
  • possible duplicated http://stackoverflow.com/questions/15076201/html-css-sticky-footer-growing-content http://stackoverflow.com/questions/3906065/problems-with-css-sticky-footer http://stackoverflow.com/questions/5822825/sticky-footer-css – apsuva Jan 30 '14 at 13:47

2 Answers2

1

Use the below code on the Footer to make it stay fixed at the bottom.

For Instance,

The HTML:

<div class="footer"><!-- Your footer code should be here. --></div>

The CSS:

.footer{
    position:fixed;
    bottom:0;
}

This will make the footer to stay at the bottom keeping it fixed.

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • Just a comment: iOS has problems with that. Just a question: Do you see anything for handling that? – loveNoHate Jan 30 '14 at 13:43
  • 1
    Making the body to have `position:relative;` would be the best way to overcome this issue. - @dollarvar – Nitesh Jan 30 '14 at 13:45
  • Check out this link as a reference - http://runastartup.com/overlay-scrolling-issues-on-iphone-ipad/ - @dollarvar – Nitesh Jan 30 '14 at 13:50
0
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}

This CSS can help you.
 For better explanation refer to this
 http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
 This blog can also do the needful
 http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
user2804021
  • 151
  • 5