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

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

Answer 1

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