Contenido con 100% entre encabezado y pie de página

Question

Supongamos que tengo el siguiente diseño (ver imagen a continuación) ... Tengo un encabezado (A) en la parte superior, pie de página (C) que siempre está en la parte inferior y contenedor (B) que está en el medio y debe llenar el espacio que queda entre el encabezado y el pie de página en un 100%.

no puede pensar en ninguna manera la forma de lograr esto usando CSS puro. ¡Cualquier idea sería apreciada!

Answer 1

Dependiendo de cómo esté configurada su página, puede funcionar si establece height: 100%; para (B) y position: absolute; para el elemento contenedor. Aquí está un ejemplo:

HTML:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>​ 

CSS:

#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
}​ 

jsFiddle

Answer 2

Su pregunta describe más o menos como norma elementos en bloque, como DIVs, compórtate. El centro div ocupará siempre el 100% del espacio entre los dos, y crecerá en función de su contenido interno.

Dicho esto, supongo que quiere un pie de página FIXED, que se mantenga posicionado en la parte inferior de la ventana del navegador. Esta es achiavable utilizando una serie de técnicas, una de las cuales está usando absolutamente posicionamiento:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

Estilo:

#header, #footer, #content { position: absolute; left: 0; width: 100%; } 
#header, #footer { overflow: hidden; background: #444; height: 100px; } 
#header { top: 0; } 
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; } 
#footer { bottom: 0; }​ 

http://jsfiddle.net/U9wfy/

Answer 3

me encontré con esta pregunta y pensé una forma más "moderna" la respuesta sería útil. Esta disposición es muy fácil usando FlexBox ..

https://www.codeply.com/go/1QgRb4uFmj

<header> 
</header> 
<main></main> 
<footer> 
</footer> 

html, body { 
    margin: 0; 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
    background: #ddd; 
} 

main { 
    overflow-y: scroll; 
    flex: auto; 
}