Making my footer stick to bottom of the page

Question

EDIT: BEFORE YOU ANSWER, READ THIS! I can't set footer like "height: 30px;" because it has to stretch! That's why most solutions don't work!!

Okay so I have a problem. My footer sticks well to the bottom of the page if there's enough content, but when I have only a few lines of content, there's a white space under the footer. Picture:

enter image description here

(source: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)

The page which I got that image from offered one solution, but it doesn't work for me. Because my footer needs to be dynamic (I don't know the height in pixels or whatsoever, the div just stretches by the amount of content placed in footer)

All of the solutions I've found need a specified height for the footer... How could I get the footer to stay at the bottom of the page?

My divs look something like this:

<div class="mobile_main">
    <div class="header">
        Stuff
    </div>
    <div class="body_main">
        Stuff
    </div>
    <div class="footer_mobile">
        Stuff
    </div>
</div>

All the 3 divs inside the main divs are stretching by content (no height specified).

Does anyone have a solution?

Possible duplicate: http://stackoverflow.com/questions/616290/making-a-css-footer-either-sit-at-the-bottom-of-the-browser-window-or-bottom-of — kamil, Dec 25 '13 at 15:42
@kamil both those solutions require the footer to have a height value — TheDuckFIN, Dec 25 '13 at 15:45
possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Murtaza, Dec 27 '13 at 05:59
can you show us a Demo in www.jsfiddle.net, As the source you given is working for me without fixed height. — Surjith S M, Dec 27 '13 at 06:04

kasper Taeymans · Answer 1 · 2013-12-25T15:54:16.573

2

you could give the footer an absolute position at the bottom left corner of the mobile_main container div. therefore you also should give this container a relative position.

http://jsfiddle.net/kasperfish/FQ6fG/5/

.mobile_main{
    position:relative;
}
.body_main{
    background:grey;
    min-height:300px;

}
.footer_mobile{
    width:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    background:lightblue;

}
.header{
    background:yellow;
}

edited Dec 25 '13 at 15:54

answered Dec 25 '13 at 15:46

kasper Taeymans

6,950
5
32
51

That doesn't work if the page height is more than the screen height: http://theduck.kapsi.fi/ – TheDuckFIN Dec 25 '13 at 15:48
http://theduck.kapsi.fi/ now it goes over the content in the bottom of the page, and on a shorter page http://theduck.kapsi.fi/gs,glsdk the problem is back :/ Also, wouldn't like to use min-height, because I want the page to be stretching to match mobile browsers well. – TheDuckFIN Dec 25 '13 at 15:59
don't use min-height for that. just set width and height of your main container to 100% – kasper Taeymans Dec 25 '13 at 16:04
There was min-height in your answer, so I thought it was needed. however, you see the problem now on the shorter page, it basically doesn't work with your solution :/ – TheDuckFIN Dec 25 '13 at 16:07

score 0 · Answer 2 · answered Dec 27 '13 at 05:55

I think you want footer always fixed in bottom of the screen. If it is here is the solution.

.footer_mobile{
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    background:lightblue;
}

But if you want footer should stay below the main container until the container height less than window height and footer get fixed on window screen bottom when container height get larger than window screen size. For that condition we have to use the jQuery for solution.

score 0 · Answer 3 · answered Dec 27 '13 at 10:57

0

Don't use height in footer.

#body {
    padding:10px;

}
#footer {
    position:absolute;
    bottom:0;
    width:100%;

    background:#6cf;
}

answered Dec 27 '13 at 10:57

Pradeep Pansari

1,287
6
10

Making my footer stick to bottom of the page

3 Answers3

Linked