Vlad Balanescu Vlad Balanescu - 1 month ago 6
CSS Question

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?

Answer

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>

Comments