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

Question

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

Navigation

#1 by (7 votes)

6

How you can keep the footer below the page always, but without using fixed or absolute, because you can give 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 it always remains on the screen, but in the case of setting absolute, the going down stays in the middle of the content.

<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

asked by Pavlo B. 30.01.2018 в 09:59

source

1 answer

Convert radians to degrees Put comments in JSON file in Visual Studio 2015

score 7 · Accepted Answer

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

I use the same HTML of your example but I would use a div that makes 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>