Keep footer down (not fixed, not absolute) with css

Question:

How can the footer be kept at the bottom of the page always, but without using fixed or absolute, because there can be several cases:

In the event that the content is not enough to fill the page, the footer does not stay down unless you put a position: fixed; bottom: 0 or position: absolute; bottom: 0

But if I put one of those two, since the content is bigger than the screen, the footer is always visible, in the case of fixed it scrolls but always stays on the screen, but in the case of putting absolute, when going down it stays through the content medium.

<html>
  <body>
    <header style="background:grey">Header</header>
    <div style="background:yellow">Contenido</div>
    <footer style="background:green">tiene que estar abajo pero no se queda abajo siempre...</footer>
  </body>
</html>

Answer:

For layout issues, flexbox is almost always the solution. In this case you can put the body as a container and let it occupy the entire height and put the flex value in the display property, you also have to make the elements be ordered vertically with flex-direction: column ; then the content would carry the flex: 1 (which is equivalent to flex: 1 1 0 ) so that it expands taking up all the excess space.

I use the same HTML as your example but I would use a div that acts as a container to leave the body clean.

body {
  margin:0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

div {
  flex: 1;
}
<html>

<body>
  <header style="background:grey">Header</header>
  <div style="background:yellow">Contenido</div>
  <footer style="background:green">tiene que estar abajo pero no se queda abajo siempre...</footer>
</body>

</html>
Scroll to Top