Alto 100% pero no tan simple..

[jorgeteChileno]

Hola, bueno tengo un drama.. bueno imaginen 3 cajas de arriba hacia abajo
la cabecera es de 10px al igual que el pie.. pero la caja del medio me debe dar el tamaño exacto para que las tres cajas esten a todo el alto de la pag.(ojala me haya explicado bien), es decir, que la caja del medio debe ser variante en su altura.. segun que tan extendida tenga la ventana del navegador.
Ahora le puse height 100% pero esa solución no me sirve ya que es 100% del alto de la ventana y al sumarle los 10 de la cabecera y pie me hace scroll.

alguien se le cocurre como hacer esta caja del medio de un alto que siempre me deje el pie (con alto fijo) AL TOPE DE ABAJO DE LA VENTANA.

[djkiku]

Hola, no me hagas mucho caso, pero por si acaso pruebalo... donde pones el 100%, pon auto;

Ya nos contaras !

[IsaBelM]

prueba con esto

#cont {
width: 500px;
height: 100%;
margin: 0 auto -20px; /* el height del footer */
background: pink;
}

#cont #div2{
padding: 25px 20px;
}

#div1 {
width: 500px;
height: 20px;
background: yellow;
}


#footer {
width: 500px;
height: 20px;
background: orange;
margin: 0 auto;
}


<div id="cont">

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>

<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
</div>

</div>

<div id="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>

[jorgeteChileno]

GRACIAS IsaBelM por tu respuesta... es una buena solucín pero las barras del medio me quedan encima del pie.. y esto debe quedar como la foto adjunta...




sigo buscando una solución... se podra hacer esto?? o se podra acortar las barras del medio al alto según la solución de IsaBelM?

gracias

[jorgeteChileno]

hola.. bueno solucione este gran problema... es mas simple de lo que pensaba.. tomando la idea de tablas (viendo que con eso si puedo hacerlo), pase mis div a funcion tabla con Display:table; y display:cell; con eso dando los anchos requeridos logre hacer que una caja fija mantenga su dimension y la otra que varie seg´n su tamaño.


Gracias amigos por darme sus respuestas y tratar de encontrar una solución.


muchos saludos desde Chile.

[snowmanchip]

Hola jorge..la solución de Isabel funciona..quizá si pones el código podemos encontrar la solución óptima.
Saludos

[jorgeteChileno]

la solucion de Ella Claro que funciona!!! esta muy cerca a lo que necesitaba.. pero no del todo, falto un pequeño detalle que no tomamargenes como lo mostre en la foto... ademas que también necesitaba que la caja tuviera un ancho elástico.

Bueno como comente antes... ya encontre la solución a esto.. con display:table y display:table-cell; lo que me deja crear ancho y alto 100% a una caja determinada respecto a la distancias entre otras cajas en el sitio y ocupandome una sumatoria 100% total respecto a la ventana(fullscreen) según el tamaño que este estirando mi navegador... UFFF dicifil de explicar.