CSS - make a FLUID height footer stick to bottom of page

Question

If the page doesn't have much content, like 300 pixels or so, the footer will appear in the middle of the page on a 1024 resolution.

How could I make my footer show to bottom of the page without knowing the footer height?

I've tried this solution:

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

but the problem is that I would need to add padding-bottom: (footerheight); in the element before the #footer. This is not possible because the footer height is variable depending on the page...

Not necessarily the most efficient method but you could just have embedded CSS on each page which adjust those specific elements. — DaiYoukai, Jan 22 '11 at 00:11
Do you have an option to use Javascript/jQuery? Seems difficult or impossible to accomplish with just CSS unless you follow Archonix suggestion. — mVChr, Jan 22 '11 at 00:18
jquery makes the page "flicker" until the footer gets fixed. if there's a javascript solution that doesn't produce this flicker, yes I'd love to use it :) — Alex, Jan 22 '11 at 00:26
It depends how you accomplish it. You can have the footer animate up from a `height:0` in order to disguise the fact that it's positioning late, or some-such. I'll try to take a stab at it after dinner — mVChr, Jan 22 '11 at 01:29

score 2 · Accepted Answer · answered Jan 24 '11 at 14:29

2

Why don't you just use min-height on the content area so if u set the min-height to 600px if theres only 300px of content it will pad the footer down another 300px so it isn't in the middle of the screen

answered Jan 24 '11 at 14:29

geoffs3310

13,640
23
64
85

4

How do you know 600px isn't in the middle of the screen? What if I have 1200px screen? – himself Jul 06 '12 at 13:06

score 0 · Answer 2 · answered Dec 28 '13 at 05:24

You can't escape this but there is a trick: make the body background the same as that of the footer and then put all other content inside a container on top of the body.

This will make a 75px footer. Note the related -75px margin of the container div.

html {
  height:100%;
  padding:0px;
  margin:0px;
}
body {
    height:95%;
    padding:0px;
    margin:0px;
    background-color:#1C303C;
}

footer {
    background-color:#1C303C;
    color:#FFFFA3;
    display:block;
    position:absolute;
    width:100%;
    min-height:75px;
    height:75px;
    margin:0px;
    padding:0px;
    left:0px;

}

#container {
    background-color:#FFFFFF;
    min-height:100%;
    height:100%;
    width:100%;
    top:0;
    left:0;
    margin: 0;
    padding:0;
    margin-bottom:-75px;
}

with relevant HTML as follows:

<body>
    <div id="container">
    </div>
    <footer>
    </footer>
</body>

CSS - make a FLUID height footer stick to bottom of page

2 Answers2