Contenido desplazable de encabezado y pie de página adhesivo
Estoy tratando de crear una página que contenga tres divs: un encabezado, un pie de página y un área de contenido. Estos deberían ocupar el 100% de la pantalla.
El encabezado y el pie de página son pequeños y no cambiarán, el área de contenido podría ser de cualquier tamaño, por lo que he agregadooverflow:auto
para que se desplace cuando sea demasiado grande.
El problema es que desborda la altura de la pantalla. He creado un violín para demostrar:https://jsfiddle.net/tdxn1e7p/
Estoy usando el siguiente CSS para configurar el html y la altura del cuerpo, por lo que elheight:100%
truco en el contenedor funcionará:
html,
body {
height: 100%;
}
La estructura de mi documento es:
<div style="height:100%;">
<div>
Header content
</div>
<div style="overflow:auto;">
Body content... this could be very long
</div>
<div>
Footer content
</div>
</div>
He encontrado muchas variaciones en este tipo de problema, comoesta pregunta, pero no he podido hacer que ninguna de las respuestas funcione para mí.