Mantener footer abajo (no fixed, no absolute) con css

publicado por: Anonymous

Cómo se puede mantener el footer abajo de la página siempre, pero sin usar fixed o absolute, porque se pueden dar varios casos:

En el caso de que el contenido no sea suficiente como para llenar la página, el footer no se queda abajo a no ser que le ponga un position: fixed; bottom: 0 o position: absolute; bottom: 0

Pero si pongo una de esas dos, al ser el contenido más grande que la pantalla, el footer es visible siempre, en el caso de fixed hace scroll pero se queda siempre en pantalla, pero en el caso de poner absolute, al bajar se queda por el medio del contenido.

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

Para temas de layout casi siempre flexbox es la solución. En este caso puedes poner el body como contenedor y que ocupe toda la altura y ponerle el valor flex en la propiedad display, también hay que hacer que se ordenen los elementos en vertical con flex-direction: column; luego el contenido llevaría la propiedad flex: 1 (que es equivalente a flex: 1 1 0)para que se expanda ocupando todo el espacio sobrante.

Uso el mismo HTML de tu ejemplo pero yo usaría un div que haga de contenedor para dejar el body limpio.

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: user7176

Leave a Reply

Your email address will not be published. Required fields are marked *