9

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.

<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>

0

1 respuesta 1

11

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.

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>

1
  • Podrias escribir el codigo de la forma larga?
    – Emma R.
    el 29 nov. 2021 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.