CSS – Altura del 100% menos #px – Encabezado y pie de página

La página web en cuestión se ve así:

// The Header // /* */ /* CONTENT */ /* */ // The footer // 

Tanto el encabezado como el pie de página tienen alturas fijas. Digamos, por ejemplo, que ambos tienen una altura de 20px. Necesito establecer la altura del contenido a 100% menos 40px (encabezado + alturas de pie de página). Sé que puedo hacerlo fácilmente con JavaScript, pero sería genial aprender a hacerlo con CSS simple, si es posible.

 #header /* hypothetical name */ { height:100%; } #header p /* or any other tag */ { margin:20px 0 20px 0; } 

Solo asegúrate de no colocar el margen y la altura en la misma etiqueta. Experimentarás algunos resultados locos.

Si su navegador es compatible con CSS3, intente utilizar el elemento CSS Calc()

 height: calc(100% - 65px); 

es posible que también desee agregar opciones de compatibilidad del navegador:

 height: -o-calc(100% - 65px); /* opera */ height: -webkit-calc(100% - 65px); /* google, safari */ height: -moz-calc(100% - 65px); /* firefox */ 

Coloque una posición fija en el encabezado y el pie de página y configúrelos para que se adhieran a la parte superior de la parte inferior de la ventana, respectivamente. Luego coloque un relleno superior e inferior en el área de contenido de 20 px.

 #header{position:fixed;top:0} #footer{position:fixed;bottom:0} #content{padding:20px 0} 

La respuesta de Marnix implica usar el relleno superior e inferior del elemento de contenido; el mío implica usar el borde superior e inferior.

Me encontré con esta solución por mi cuenta mientras trataba de descubrir cómo hacer algo similar sin recurrir a las tablas: hacer que la altura del elemento central sea del 100%, pero luego establecer el modelo de tamaño de caja en “caja de borde” (para que la altura incluye no solo el contenido dentro de la caja sino también los bordes alrededor de la caja), haga que los bordes superior e inferior sean realmente gruesos (como, digamos, 20px), luego use un posicionamiento fijo para superponer el encabezado y pie de página sobre la parte superior bordes inferiores del elemento central.

Aquí está mi ejemplo de CSS:

 html, body { height: 100%; margin: 0; padding: 0; } #content { height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; /* Ensure that the height of the element includes the box border, not just the content */ border: 0; border-top: 20px solid white; border-bottom: 20px solid white; /* Leave some space for the header and footer to overlay. */ } #header, #footer { position: fixed; left: 0; right: 0; height: 20px; background-color: #eee; /* Specify a background color so the content text doesn't bleed through the footer! */ } #header { top: 0; } #footer { bottom: 0; } 

Esto funciona en Google Chrome 24 para Mac. No lo he probado en otros navegadores, sin embargo.

Es de esperar que esto ayude a alguien más que aún tiene la tentación de usar una tabla y obtener el diseño de la página ya hecho. 🙂

Este ejemplo parece mostrar la forma más robusta de hacer esto. En realidad, es un poco defectuoso en IE, porque el cambio de tamaño va mal a veces. A saber, al hacer un cambio de tamaño desde la esquina inferior derecha y simplemente hacer un cambio de tamaño vertical a mano (bastante difícil de hacer a veces), la página no se actualizará en IE. Tuve el mismo problema con esto y simplemente lo solucioné con JS después de todo, debido a otros eventos en mi página web.

http://www.xs4all.nl/~peterned/examples/csslayout1.html