Cómo crear div para llenar todo el espacio entre el encabezado y el pie de página div

https://stackoverflow.com/questions/206652

03-07-2019
|

Pregunta

Estoy trabajando en pasar de usar tablas con fines de diseño a usar divs (sí, sí, el gran debate). Tengo 3 divs, un encabezado, contenido y pie de página. El encabezado y el pie de página son 50px cada uno. ¿Cómo consigo que el pie de página div se quede en la parte inferior de la página, y el contenido div para llenar el espacio intermedio? No quiero codificar la altura de los divs de contenido porque la resolución de la pantalla puede cambiar.

Solución

solución Flexbox

Usando el diseño flexible, podemos lograr esto al tiempo que permitimos el encabezado y el pie de página de altura natural. Tanto el encabezado como el pie de página se pegarán a la parte superior e inferior de la ventana gráfica respectivamente (al igual que una aplicación móvil nativa) y el área de contenido principal llenará el espacio restante, mientras que cualquier desbordamiento vertical será desplazable dentro de esa área.

Ver JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Otros consejos

Para resumir (y esto vino de la CSS Sticky Footer enlace proporcionado por Traingamer), esto es lo que utilicé:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Para ampliar la respuesta de Mitchel Sellers, dale a tu altura de división de contenido: 100% y dale un margen automático.

Para obtener una explicación completa y un ejemplo, consulte CSS Sticky Footer de Ryan Fait .

Ya que conoce el tamaño (altura) de su encabezado, póngalo dentro de la división de contenido (o use márgenes).

La posición absoluta le dará problemas si su contenido es más grande (más alto) que la ventana.

Una forma de hacer esto usando CSS Grid:

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

si está intentando maximizar la altura de su división de contenido, en el complemento CSS

altura: 100%;

#footer {
 clear: both;
}

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow