CSS - Altura 100% #px menos - Encabezado y pie

Question

La página web en cuestión es el siguiente:

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

Tanto el encabezado y el pie de página han fijado las alturas. 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.

Answer 1

#header /* hypothetical name */ 
{ 
    height:100%; 
} 

#header p /* or any other tag */ 
{ 
    margin:20px 0 20px 0; 
} 

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

Answer 2

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} 

Answer 3

Este ejemplo parece mostrar la forma más robusta de hacerlo. 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

Answer 4

respuesta de Marnix implica el uso de la parte superior y el relleno inferior del elemento de contenido; el mío implica usar el borde superior e inferior.

había tropezado con esta solución por mi cuenta al tratar de encontrar la manera de hacer algo similar sin recurrir a las tablas: hacer que la altura del elemento central 100%, pero a continuación, establezca el modelo de caja de dimensionamiento de "frontera-box "(para que la altura incluya 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, por ejemplo, 20px), luego use un posicionamiento fijo para superponer el encabezado y pie de página los bordes superiores e inferiores de espesor loco del elemento central.

Aquí es mi muestra 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.

Esperemos 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. :-)

Answer 5

Si su navegador soporta CSS3, pruebe a utilizar el elemento CSS Calc()

height: calc(100% - 65px); 

también puede ser que desee añadir opciones de compatibilidad del navegador:

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