Home / Questions / 134795
Accepted
Pavlo B.
Asked: 2020-01-31 00:59:28 +0800 CST 2020-01-31 00:59:28 +0800 CST

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

  • 772

How can you keep the footerbottom of the page always, but without using fixed or absolute, because several cases can occur:

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

But if I put one of those two, since the content is larger than the screen, the footer is always visible, in the case of fixed it scrolls but it always stays on the screen, but in the case of putting absolute, when it goes 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>

css

1 Answers

  1. Best Answer

    For layout issues almost always flexbox is the solution. In this case you can put the bodyas a container and occupy the entire height and put the value flexin the property display, you also have to order the elements vertically with flex-direction: column; then the content would have the property flex: 1(which is equivalent to flex: 1 1 0) so that it expands, occupying all the remaining space.

    I use the same HTML as your example but I would use a divcontainer to leave the bodyclean.

    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>

    • 11