How to make the footer at the bottom of page?

Question

There's are some pages in my website which content is little,

the content height + footer height < one screen height

See the picture below:

enter image description here

So my question is how can I make the footer at the bottom of the page when my content's height is not enough to cover the full page?

PS: I don't want the footer page fixed at the bottom.

if you don't want your footer to be fixed then apply min-height to your content — Bhojendra Rauniyar, Sep 11 '13 at 02:43
@Charlie That's not what I want, because it's the footer is fixed at the bottom — Charles0429, Sep 11 '13 at 02:45
If you don't want to apply a min-height to your content, you could also change the background color to achieve the allusion that your footer extends all the way to the bottom of the page. But in order for us to help you more, we need to see code. — BigMacAttack, Sep 11 '13 at 02:48
I agree with @BigMacAttack. Forget the hacks, just color your page background a dark color to match the footer. It'll look better and work better than any of this other stuff. — andi, Sep 11 '13 at 03:08

score 0 · Accepted Answer · answered Sep 11 '13 at 02:54

0

http://jsfiddle.net/yvZaV/1/

<div class="wrapper">
    <div>content here, this will push the footer down the page if it is needed</div>
    <footer>footer here</footer>
</div>

html, body {
    height:100%;
    min-height:100%;
}
.wrapper {
    position:relative;
    min-height:100%;
}
footer {
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:red;
}

answered Sep 11 '13 at 02:54

Anton

7,709
5
31
33

The author did mention that he doesn't want to fix the footer to the bottom of the page. – BigMacAttack Sep 11 '13 at 02:56
it gets pushed down when the content pushes it down – Anton Sep 11 '13 at 02:58
I think absolute positioning may cause other problems... – andi Sep 11 '13 at 03:05
got an example of the problem? – Anton Sep 11 '13 at 03:06

score 0 · Answer 2 · answered Sep 11 '13 at 03:04

0

You can set min-height to your content, you can set it in pixels or in %

.content{
    min-height: 100%;
}

http://jsfiddle.net/yvZaV/2/

answered Sep 11 '13 at 03:04

Vitim.us

20,746
15
92
109

http://css-tricks.com/snippets/css/cross-browser-min-height/ – max li Sep 11 '13 at 03:52

How to make the footer at the bottom of page?

2 Answers2