Search code examples
htmlcssfootersticky-footer

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

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...

Solution

  • 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