Ayuda de diseño de CSS - Amplíe div en la parte inferior de la página

Question

Estoy intentando crear un diseño con un área de "encabezado" que contenga un logotipo y algunos enlaces, y luego un área de contenido que debe extenderse hasta el final de la página . Aquí es donde me estoy atascado.

He rodeado el encabezado y el contenido con un contenedor div que tiene una altura del 100%, esto funciona bien. Pero no puedo hacer que el contenido div se extienda hasta el fondo del contenedor div ya que al darle una altura mínima de 100% parece tomar la altura del cuerpo de la página, así que termino con una barra de desplazamiento debido al espacio tomado en la parte superior de la página por el encabezado.

Aquí es una estructura metálica que se espera hace lo que estoy tratando de conseguir un poco más claro ...

Aquí está un ejemplo de CSS rápida, esto funciona, aparte de que exista siempre una barra de desplazamiento de que parece ser la altura del área del encabezado ...

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
body { 
    background-color: #000; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    min-height: 100%; 
} 
#header { 
    padding-top: 26px; 
} 
#logo { 
    width: 194px; 
    height: 55px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#content { 
    margin-top: 10px; 
    position: absolute; 
    width: 1000px; 
    min-height: 100%; 
    background-color: #fff; 
} 

Answer 1

Haga la posición div del contenedor: relativa y la posición div del contenido: absoluta. A continuación, proporcione el contenido div superior: < encabezado altura > y parte inferior: 0

No estoy en condiciones de probar esto en este momento, pero creo que algo así debería funcionar.

Answer 2

http://jsfiddle.net/CZayc/

esto funciona envolviendo la cabecera y el cuerpo en un div para empujar el pie hacia abajo

index.html

<div id="wrap"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     main<br/>main<br/>main<br/>main<br/>main<br/>main<br/> 
    </div> 
</div> 
<div id="footer"> 
    footer 
</div> 

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    border-top:20px solid #fff; 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
} 

Answer 3

limitaciones: la altura del encabezado debe ser estática, con un altura bsoluta.

la altura del contenido es dinámica.

código CSS:

* { 
    padding:0; 
    margin:0; 
} 
html, body { 
    height: 100%; 
    color: #fff; 
} 
#header { 
    background: red; 
    position: absolute; 
    z-index:20; 
    height: 7em; 
    overflow:hidden; 
    width:100%; 
} 
#content { 
    background: blue; 
    position: absolute; 
    top: 0; 
    padding-top: 7em; 
    min-height: 100%; 
    box-sizing: border-box; 
} 

contenido de estirar todo el camino hasta el fondo, aun cuando el texto es corto.

cuando el texto de contenido es más largo que nuestra altura de la ventana - obtenemos el desplazamiento automático

Ejemplo: http://jsfiddle.net/fixit/p3B4s/3/