Foros del Web » Creando para Internet » CSS »

Altura de DIV igual algura restante

Estas en el tema de Altura de DIV igual algura restante en el foro de CSS en Foros del Web. 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? ...
  #1 (permalink)  
Antiguo 11/09/2011, 12:19
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 17 años, 2 meses
Puntos: 11
Altura de DIV igual algura restante

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?
  #2 (permalink)  
Antiguo 11/09/2011, 12:28
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 893
Antigüedad: 15 años, 9 meses
Puntos: 32
Respuesta: Altura de DIV igual algura restante

Si pusieras el codigo css sería mucho mejor, que yo sepa no hace falta hacerlo con js...
  #3 (permalink)  
Antiguo 11/09/2011, 13:14
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 17 años, 2 meses
Puntos: 11
Respuesta: Altura de DIV igual algura restante

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
  1. <div id="header"></div>
  2. <div id="contenedor">
  3.     <div id="contenido">
  4.     </div>
  5. </div>
  6. </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).
  #4 (permalink)  
Antiguo 11/09/2011, 14:26
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 años, 6 meses
Puntos: 306
Respuesta: Altura de DIV igual algura restante

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 11/09/2011, 17:19
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 17 años, 2 meses
Puntos: 11
Respuesta: Altura de DIV igual algura restante

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
  1. #header{
  2.    height: 100px;
  3. }
  4.  
  5. #contenedor{
  6.    min-height: 100%;
  7. }

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
  1. #contenedor{
  2.    min-height: 100%;
  3.    margin-top: -100px;
  4. }

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
  1. #header{
  2.    height: 100px;
  3. }
  4.  
  5. #contenedor{
  6.    min-height: 100%;
  7.    margin-top: -100px;
  8. }
  9.  
  10. #contenido {
  11.    magin-top: 100px;
  12. }

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).

Etiquetas: altura, igual
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:07.