De mi investigación, esta parece ser una pregunta CSS absolutamente clásica, pero no puedo encontrar una respuesta definitiva, por lo que StackOverflow sí lo es.
¿Cómo configuro un div de contenido para que ocupe el 100% de la altura del cuerpo, menos la altura ocupada por un encabezado y pie de página de altura fija?
title etc body content //CSS html, body { height: 100%; } header { height: 50px; } footer { height: 50px; } #content { height: 100% of the body height, minus header & footer } Me gustaría usar CSS puro y que la respuesta sea a prueba de balas en todos los navegadores.
esta versión funcionará en todos los navegadores más recientes y ie8 si tiene el script modernizr (si no solo cambia el header y el footer en div s):
Violín
html, body { min-height: 100%; padding: 0; margin: 0; } #wrapper { padding: 50px 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #content { min-height: 100%; background-color: green; } header { margin-top: -50px; height: 50px; background-color: red; } footer { margin-bottom: -50px; height: 50px; background-color: red; } p { margin: 0; padding: 0 0 1em 0; }
dfs
En la medida en que no sea una solución de navegador cruzado, puede aprovechar el uso de calc(expression) para lograr eso.
html, body { height: 100%; } header { height: 50px; background-color: tomato } #content { height: -moz-calc(100% - 100px); /* Firefox */ height: -webkit-calc(100% - 100px); /* Chrome, Safari */ height: calc(100% - 100px); /* IE9+ and future browsers */ background-color: yellow } footer { height: 50px; background-color: grey; }
Ejemplo en JsFiddle
Si quieres saber más sobre calc(expression) es mejor que visites este sitio.
Este sigue siendo el resultado principal de Google cuando estaba tratando de encontrar una respuesta a esta pregunta. No tuve que admitir navegadores más antiguos en mi proyecto y siento que encontré una solución mejor y más simple en flex-box . El fragmento de CSS a continuación es todo lo que es necesario.
También he mostrado cómo hacer que el contenido principal se pueda desplazar si la altura de la pantalla es demasiado pequeña.
html, body { height: 100%; } body { display: flex; flex-direction: column; } header { min-height: 60px; } main { flex-grow: 1; overflow: auto; } footer { min-height: 30px; }
Hello Goodbye
La nueva y moderna forma de hacerlo es calcular la altura vertical restando la altura tanto del encabezado como del pie de página desde la altura vertical de la ventana gráfica.
//CSS header { height: 50px; } footer { height: 50px; } #content { height: calc(100vh - 50px - 50px); }
Tratar de calcular el encabezado y el pie de página es malo 🙁 Un diseño debe ser simple, explicativo por sí mismo. Muy sencillo. Los cálculos son simplemente … no fáciles. No es fácil para los humanos y un poco difícil para las máquinas.
Lo que estás buscando es un subconjunto del diseño del Santo Grial .
Aquí hay una implementación usando la pantalla flexible. Incluye barras laterales además del pie de página y el encabezado. Disfrutar:
Holy Grail HEADER
------------ NAV| CONTENT - START
CONTENT - END |SIDE ------------
FOOTER
Puede aprovechar Advantage de la propiedad css Box Sizing .
#content { height: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding-top: 50px; margin-top: -50px; padding-bottom: 50px; margin-bottom: -50px; }
Ver el JsFiddle .
Esta pregunta ha sido respondida bastante bien, pero me tomo la libertad de agregar una solución de JavaScript. Simplemente dé el elemento que desea ‘expandir’ el id footerspacerdiv , y este fragmento de javascript expandirá ese div hasta que la página ocupe todo el alto de la ventana del navegador.
Funciona en base a la observación de que, cuando una página es menor que el alto completo de la ventana del navegador, document.body.scrollHeight es igual a document.body.clientHeight. El ciclo while aumenta la altura de footerspacerdiv hasta que document.body.scrollHeight sea mayor que document.body.clientHeight. En este punto, footerspacerdiv realmente tendrá 1 píxel de altura y el navegador mostrará una barra de desplazamiento vertical. Por lo tanto, la última línea del script reduce la altura de footerspacerdiv en un píxel para que la altura de la página sea exactamente la altura de la ventana del navegador.
Al colocar footerspacerdiv justo encima del ‘pie de página’ de la página, este script se puede usar para ‘bajar el pie de página’ al pie de la página, de modo que en páginas cortas, el pie de página esté alineado con la parte inferior de la ventana del navegador.
Aquí hay una solución que no usa márgenes negativos o calc . Ejecute el siguiente fragmento para ver el resultado final.
Explicación
Le damos al encabezado y al pie de página una altura fija de 30px y los 30px absolutamente en la parte superior e inferior, respectivamente. Para evitar que el contenido caiga por debajo, utilizamos dos clases: below-header y above-footer para rellenar el div arriba y abajo con 30px .
Todo el contenido está envuelto en una position: relative div position: relative para que el encabezado y el pie de página se encuentren en la parte superior / inferior del contenido y no en la ventana.
Usamos las clases fit-to-parent y min-fit-to-parent para que el contenido complete la página. Esto nos da un pie de página pegajoso que es al menos tan bajo como la ventana, pero oculto si el contenido es más largo que la ventana.
Dentro del encabezado y pie de página, usamos la display: table y display: table-cell estilos de display: table-cell para dar al encabezado y pie de página cierto margen vertical sin interrumpir la calidad de la página. (Darles relleno real puede hacer que la altura total de la página sea superior al 100% , lo que hace que aparezca una barra de desplazamiento cuando en realidad no se necesita).
.fit-parent { height: 100%; margin: 0; padding: 0; } .min-fit-parent { min-height: 100%; margin: 0; padding: 0; } .below-header { padding-top: 30px; } .above-footer { padding-bottom: 30px; } .header { position: absolute; top: 0; height: 30px; width: 100%; } .footer { position: absolute; bottom: 0; height: 30px; width: 100%; } /* helper classes */ .padding-lr-small { padding: 0 5px; } .relative { position: relative; } .auto-scroll { overflow: auto; } /* these two classes work together to create vertical centering */ .valign-outer { display: table; } .valign-inner { display: table-cell; vertical-align: middle; }
My webpage