cómo hacer DIV alto 100% entre encabezado y pie de página

¿Hay alguna forma de configurar un diseño para que el encabezado sea 50px, el cuerpo sea 100% y el pie de página sea 50px?cómo hacer DIV alto 100% entre encabezado y pie de página

Me gustaría que el cuerpo ocupe toda el área de visualización al mínimo. Me gustaría tener el pie de página y el encabezado de estar en la pantalla en todo momento

Fuente

2012-04-19 Arcadian

http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich

¿Qué comportamiento desea si el contenido del cuerpo se desborda la altura de la pantalla? – bendataclear

creé un ejemplo en jsFiddle:

ACTUALIZADO jsFiddle: http://jsfiddle.net/5V288/1025/

HTML:

<body> 
    <div id="header"></div> 
    <div id="content"><div> 
     Content 
    </div></div> 
    <div id="footer"></div> 
</body>

CSS :

html { height: 100%; } 
body { 
    height:100%; 
    min-height: 100%; 
    background: #000000; 
    color: #FFFFFF; 
    position:relative; 
} 
#header { 
    height:50px; 
    width:100%; 
    top:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#footer { 
    height:50px; 
    width:100%; 
    bottom:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#content { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height:100%; 
    padding: 0 20px; 
} 
#content > div { 
    padding: 70px 0; 
}

Sin border-box el contenido será hei ght 100% + 140px relleno. Con el cuadro de borde, la altura del contenido será del 100% y el relleno estará dentro.

Fuente

2012-04-19 12:56:38 WolvDev

Sería bueno [incluir algún código aquí] (http://stackoverflow.com/a/12907900/1269037) en caso de que JSFiddle no esté disponible. Por cierto, el 'tamaño de la caja: border-box;' no parece hacer ninguna diferencia. –

Sin border-box el contenido será alto 100% + 140px relleno. Con el cuadro de borde, la altura del contenido será del 100% y el relleno estará dentro. – WolvDev

Eso no funciona cuando se desplaza, el pie de página se desplaza con el contenido. – Roaders

sólo una solución para la solución de Andreas Winter:

http://jsfiddle.net/5V288/7/

* Con la solución de la misma, que tendría problemas si el contenido es mayor que el área de la ventana disponible.

Fuente

2012-04-19 13:17:44

Gracias por esto: estaba luchando con un encabezado y pie de página fijo con un área central 100% desplazable. ¡Esto es perfecto, ahora puede tener diseños EPIC!^__^ – Jason

yayyyyyyy, estoy feliz de poder ayudarte: 3 –

Creo que lo que estás buscando es "múltiples coordenadas absolutas". A List Apart tiene una explicación here pero básicamente, sólo tiene que especificar la posición del cuerpo en absoluto, y establecer tanto top: 50px y bottom: 50px:

<body> 
<style> 
#header { 
    position: absolute; 
    height: 50px; 
} 

#body {  
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    background-color: yellow; 
} 

#footer { 
    position:absolute; 
    height: 50px; 
    bottom: 0; 
} 
</style> 
<div id="header">Header</div> 
<div id="body">Content goes here</div> 
<div id="footer">Footer</div>

http://www.spookandpuff.com/examples/absoluteCoordinates.html muestra la técnica de una forma más bonita.

Fuente

2012-10-16 05:12:00

cómo hacer DIV alto 100% entre encabezado y pie de página

Respuesta

Cuestiones relacionadas