Making my footer stick to bottom of the page

问题

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?

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

回答2:

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.

回答3:

Don't use height in footer.

#body {
    padding:10px;

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

    background:#6cf;
}

来源：https://stackoverflow.com/questions/20774383/making-my-footer-stick-to-bottom-of-the-page

标签

css

html

footer