Altura de DIV igual algura restante

enridp · #1 (**permalink**) 11/09/2011, 12:19

Hola a todos, y derecho al grano:

Este es el problema:

Como hacer para que el cuadro azul ocupe solo el resto de la ventana? (la parte roja)
En la imagen se ve el resultado tipico de asignarle height:100% al div azul.

Buscando bastante llegue a la conclusion de que esto no es posible hacerlo con CSS puro y que es necesario Javascript.

Pero queria antes cerciorarme de esto, asique por las dudas pregunto en el foro.

Alguien sabe como resolver este problema sin JS?

gogupe · #2 (**permalink**) 11/09/2011, 12:28

Si pusieras el codigo css sería mucho mejor, que yo sepa no hace falta hacerlo con js...

enridp · #3 (**permalink**) 11/09/2011, 13:14

Es que no hay ningun codigo especifico, estoy buscando una solucion general al problema.

Pero bueno, si surgio de un problema especifico que si quieres lo comento mejor:

HTML:

Código HTML:

Ver original<body>
<div id="header"></div>
<div id="contenedor">
    <div id="contenido">
    </div>
</div>
</body>

Lo que va adentro de contenido es dinamico y la idea es que se comporte de la siguiente forma:

1) si el contenido es muy grande, entonces expande al "contenedor" (y pueden aparecer scroll bars)
2) si el contenido es muy chico, entonces el contendor tiene un alto minimo para rellenar el viewport restante (no aparecen scroll bars)
3) si el contenido tiene un height:100% entonces ocupa el resto del viewport (sin scroll bars). Tambien en este caso lo ideal seria tener un min-height (de modo que si el viewport restante es muy chico, se respete el min-height y aparezcan scroll bars).

C2am · #4 (**permalink**) 11/09/2011, 14:26

Me parece que te has respondido solo, digo, con lo del min-height.
En realidad, tendriamos que ver el codigo css, ya que solo pusiste el html.
Es probable, digo adivinando un poco, que el div rojo tenga un height definido, pero solo adivino.

Saludos

enridp · #5 (**permalink**) 11/09/2011, 17:19

Hola C2am, la parte roja no es un DIV es la ventana (el viewport).
Y lo del min-height no funciona, porque digamos que tenemos algo como:

Código CSS:

Ver original#header{
   height: 100px;
}
 
#contenedor{
   min-height: 100%;
}

entonces esto nos da la situacion de la imagen (donde el div azul = contenedor se sale de la ventana).

Para que no se salga podriamos hacer algo como:

Código CSS:

Ver original#contenedor{
   min-height: 100%;
   margin-top: -100px;
}

o tambien un position:relative; y top: -100px;

Pero entonces el contenido del div azul se superpondria con el del rojo.

Entonces podriamos agregarle un padding-top: 100px;
pero entonces de nuevo el div azul se sale de la ventana.

Entonces podriamos en vez de agregarle el padding al contenedor agregarselo al contenido:

Código CSS:

Ver original#header{
   height: 100px;
}
 
#contenedor{
   min-height: 100%;
   margin-top: -100px;
}
 
#contenido {
   magin-top: 100px;
}

Y esto creo que funcionaria para las situaciones 1 y 2, pero no para la 3 (donde el contenido tiene que ocupar todo el resto, pero solo el resto) porque si tenemos:

#contenido {
magin-top: 100px;
height: 100%;
}

height:100% pasa a ser de nuevo demasiado y tenemos de nuevo la situacion de la imagen.
(De hecho creo que esto ni me habia funcionado, necesita si o si un height en el contenedor, el min-height no le sirve como referencia).

Para solucionar eso podriamos de nuevo agregar un height:100% al contenedor y ademas un overflow:hidden;

Pero no solo que estaríamos ocultando al contenido (no dimensionandolo acordemente) sino que esto haria que deje de funcionar el min-height (o sea ya no se expanda el contenedor si es necesario).

En fin, la pregunta es mas general por eso no hay un CSS especifico, o sea, la idea es crear justamente el CSS que logra hacer los 3 puntos que explique en mi post anterior (y que basicamente se resumen a poder dimensionar un DIV para que ocupe solo el viewport restante).