making the footer stick the bottom

Question

So im trying to make the footer stick to the bottom of the page like this http://cleanstickyfooter.herokuapp.com/

(zooming out and the footer still stays at the bottom)

How can i achieve this?

this is a test i made, please help me understand what i need to do because the footer is not staying at the bottom. http://trulyamped.com/responr/Responr.html

you need to research for yourself, tutorials on this can be found at [this](http://www.google.com) site. — Kyslik, Jun 10 '13 at 13:20
i did look on that site and i tried to mimic what i was suppose to do but i don't know if i have something wrong in my css. — TeoAlmonte, Jun 10 '13 at 13:24
Duplicate : http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?lq=1 — Marco Geertsma, Jun 10 '13 at 13:44

score 0 · Accepted Answer · answered Jun 10 '13 at 13:23

0

This is easily achieved using fixed positioning:

.body .mainfooter {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
}

answered Jun 10 '13 at 13:23

blend

640
4
6

Remember that fixed footers and headers are a real mess when they're viewed on mobile devices, behaving differently and quite badly. My opinion is that you should avoid them at all if you can. – Alan Piralla Jun 10 '13 at 13:28
we can also use media query to switch fixed positions to relative positions for mobile devices. – hmhcreative Jun 10 '13 at 14:37

score 0 · Answer 2 · answered Jun 10 '13 at 13:38

0

    <div id='footer'>...</div> // if we say that this is the footer div 

    <style type='text/css'>
    #footer{
    display:block;
    position:fixed;
    bottom:0px;
    height:70px;

    }
   </style>

answered Jun 10 '13 at 13:38

Sora

2,465
18
73
146

making the footer stick the bottom

2 Answers2

Linked