Search code examples
cssfooter

CSS Stick Footer to Bottom

Here is my code to stick the footer to bottom of the page:

#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}

When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?

Solution

  • What about using Flexbox? It is supported by IE>=10.

    To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.

    The "upper"-one gets the value flex: 1, which is a shorthand for:

    flex-grow: 1
flex-shrink: 1
flex-basis: auto

    This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.

    Code snippet

    html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
    <!doctype html>
<html>

<head>
</head>

<body>
  <div class="content"></div>
  <footer class="footer">
    Hey footer!
  </footer>
</body>

</html>