Dos DIV en un contenedor, con alturas relativas
Hay un contenedor con dos bloques de texto uno encima de otro. La altura del contenedor es fija, pero las alturas de los textos no.
El texto de arriba tiene que leerse entero siempre, y el de abajo puede llevar scroll. La pregunta es... ¿cómo hacer que el tamaño del DIV inferior varíe en función del superior? Es decir, que se adapte al tamaño "que le deja" el de arriba. Si pudiera fijar los tamaños no habría problema, pero se trata de que el inferior quede "pegado" al superior, y adapte su altura al espacio restante.
Después de un par de pruebas con alturas he pensado en usar una tabla (que ya hace eso "automáticamente") y al DIV inferior darle una altura auto, o del 100% y un overflow:scroll, para que cogiera el espacio "que le quedara" pero no funciona.
¿Se os ocurre alguna forma de solucionarlo?
Gracias!
xavib
xavib
el fondo en teoría es todo blanco
^_^
Creo que hay tantos post diciendo lo mismo de diferentes formas que se pierde en la traducción... pero el dibujico que hice es explicativo, no?
Resumo:
- un contenedor con altura fija (content)
- un primer bloque de texto con altura variable (heading)
- un segundo bloque de texto con altura variable (detail)
- desconocemos las alturas de ambos bloques
- el contenido "detail" puede ser más alto que "content"
El problema lo encontramos cuando detail es más alto que content. La cosa es cómo hacer que detaul se adapte a la altura "que le queda" después de heading.
y un ejemplo (hay backrounds pa ver donde empiezan y donde acaban las cosas):
<code><style>
#content {
margin:0px auto 0px auto;
width:500px;
height:500px;
background:#CCC;
position:relative;
}
#heading {
position:relative;
background:#F2F2F2;
}
#detail {
overflow:auto;
position:relative;
}
</style></code>
<code><div id="content">
<div id="heading">
<p>Suspendisse eget dolor euismod nibh varius consequat. Morbi velit nulla, placerat sed, aliquam nec, eleifend eu, nulla. Mauris et nibh id augue pulvinar suscipit. Nullam elit lorem, ultricies a, nonummy nec, blandit ac, est.</p>
<p>Praesent magna. Donec hendrerit. Praesent et enim. Morbi ac mauris non quam semper dapibus. Fusce feugiat elit sed quam. Aliquam tellus. Donec cursus, augue eget ultrices imperdiet, arcu nisl dictum risus, ac rutrum magna diam sed purus.</p>
</div>
<div id="detail">
<p>Nam eros eros, interdum at, pretium commodo, hendrerit bibendum, libero. Vestibulum vel justo. Sed rhoncus rhoncus nibh. Mauris faucibus nulla iaculis orci interdum tempor. Suspendisse condimentum nulla a libero. Suspendisse malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vitae urna non justo rutrum tempor. Sed pellentesque elit a felis. Maecenas elementum, odio id tempor aliquet, arcu est porta dui, in tempor nisi libero id nulla. Etiam eu tellus. Ut sit amet mi sed neque sodales convallis. Nulla ut enim vel enim tincidunt varius. Cras ligula ipsum, viverra a, volutpat nec, lacinia a, sem. Vestibulum sit amet erat. Donec id purus at quam tempor suscipit. Donec mauris velit, fringilla non, nonummy vel, feugiat vitae, ligula. </p>
<p>Ut tempus felis vitae risus. Suspendisse potenti. Vivamus a magna at nisi mattis mattis. Integer lacinia enim at magna consectetuer pretium. Sed at mi sit amet lacus congue bibendum. Fusce vel dui. Fusce adipiscing purus ultricies urna. Aenean ullamcorper sodales tellus. In pellentesque eros a ante. Cras consequat faucibus sem. Nulla facilisi. Nam gravida nunc quis justo. Ut vehicula justo ut turpis. Pellentesque pellentesque ullamcorper nunc. Etiam tempor elementum pede. Aliquam erat volutpat. Nulla eros. Aenean porta enim eget nisl. Nullam a lectus. </p>
</div>
</div></code>
pseudo
Pero el problema era que el inferior podía desbordar al contenedor genérico y xabib quería entonces un scroll para el inferior... cuando por css lo que podrías "controlar" en ese caso sería un scroll para el genérico, que es el que sería desbordado.
O eso es lo que yo he entendido...
zigotica
no se si no entiendo la pregunta o es que igual es demasiado obvio. dependiendo de los colores que uses de fondo (de ahi las preguntas de mendi), puedes usar un doble contenedor o no. <code><style type="text/css">
#box {position: relative; background: green; width: 400px; height: 300px; padding: 20px; }
#cont {position: relative; background: white; }
#in1 {position: relative; background: red; }
#in2 {position: relative; background: orange; margin-top: 10px; }
</style>
</head>
<body>
<div id="box">
<div id="cont">
<div id="in1">
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 in1 <br>
</div>
<div id="in2">
in2 in2 in2 in2 in2 in2 in2 in2 in2 in2 <br>
in2 in2 in2 in2 in2 in2 in2 in2 in2 in2 <br>
in2 in2 in2 in2 in2 in2 in2 in2 in2 in2 <br>
in2 in2 in2 in2 in2 in2 in2 in2 in2 in2 <br>
in2 in2 in2 in2 in2 in2 in2 in2 in2 in2 <br>
</div>
</div>
</div></code>si al in2 le das el mismo color que al cont o box ya tienes lo que quieres. si no es eso, a ver si explicamos algo mejor :)
mendi
El div derecho con el fondo rojo (que no es su fondo sino el de su contenedor), tiene altura variable. Podría tener encima otro div con altura fija y con fondo blanco, a ver si me explico.
mendi
No me has entendido... hablo de alturas, no de anchuras. El caso no es exactamente el mismo, pero podría serlo si dentro del campo rojo meto otro div blanco, que taparía la imagen roja de fondo.
xavib
ahá... lo que pasa es que ahí conoces la anchura de la columna, mientras que yo no sabré nunca la altura de la fila. Nah, a ver qué se me ocurre... igual realmente "lo mejor" será usar js para ver la altura del contenedor superior y modificar la del inferior.
mendi
http://www.quota.com.es/
Esta es una web que hice en CSS. La columna roja que ves a la derecha en la home, es una imagen de fondo aplicada a un campo contenedor, no al div de la propia columna. La idea sería poner un div dentro y por encima de otro color, y todo lo que quedase por debajo sería la parte roja.
xavib
No entiendo muy bien tu propuesta... podrías poner un ejemplo? aunque sea un dibujete.
... de todas formas, el fondo en teoría es todo blanco. Los dos bloques de texto son algo así como resumen/ampliación. Por eso la ampliación puede llevar scroll. En el resumen, además, no se puede controlar la longitud (limitando los caracteres, por ejemplo, cosa que solucionaría la papeleta) y debe poder leerse entero.
mendi
Qué tipo de contenido hay en el div inferior? O cómo piensas diferenciar visualmente un campo de otro??
Quicir, que como te he sugerido antes, puedes trucarlo con un background general para todo el contenedor y luego un background de color que tape el general en el campo superior. Ya que el div inferior no determina la altura de su campo, puedes tener un div corto con apariencia de que ocupa el resto de espacio libre.
psycho
Creo que con css no tiene solucion porque lo que necesitas es una regla de 3:
height_div_abajo = height_div_contenedor - height_div_arriba
A no ser que lo maquetes de otra manera, no sé si con tablas se podría hacer...
El problema es que el height_div_arriba es variable.
xavib
Nunca habrá contenido suficiente en el contenedor de arriba como para que el de abajo tenga 15px... el de arriba estará entre los 30 y los 250 px de altura, dificilmente será mayor que la mitad.
El rollo es que si fijamos esos 250px de altura en ambos y el de arriba mide 30, quedará demasiado espacio entre ellos. Quizá usando max-height de alguna forma podría solucionarse... pero asi como el min-height entiendo bien como tratarlo, no sé como aplicar el max-height en este caso, ya que seguimos sin tener la altura del contenedor inferior para que se adapte.
psycho
Hola, yo veo un inconveniente y es que en el caso de que el contenedor tenga una altura determinada, si el div de arriba es muy grande puede que el div de abajo no llegue a verse o que tenga una altura de 15px.
Seguro que es la mejor manera de hacerlo?
Otra es que la altura del contenedor se adapte a la altura del bloque de arriba (variable) mas una altura (determinada) que tu le des al bloque de abajo, con lo que siempre te quedaría ajustado.
xavib
Gracias kassel, pero creo que el dibujico que he hecho no es muy aclarativo. No se trata de dos columnas, sino de dos ejemplos de contenido.
Vuelvo a subir un ejemplo en el que se ve más claro el rollo, a ver si a alguien se le ocurre algo y se puede evitar el javascript ^_^
http://img444.imageshack.us/img444/5191/caca1yb7.gif
http://img411.imageshack.us/img411/7346/caca2is2.gif
kassel
esto mismo, me esta sucediendo a mi, si ademas añadimos que el site no es homogeneo, y al final lo unico que me ha sacado con mas sudor que otra cosa ha sido java script.
En fin espero que te sirva
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
como un ejemplo.
Pero por lo que veo quizas podrias alojar los dos en un mismo contendor con un color de fondo y al de arriba dale color y al de abajono, puede ser una idea.
xavib
Eso es lo que me estoy temiendo... bueno, yo creo que he probado ya todo lo que se me ha ocurrido. Si se os ocurre algo, ya sabéis ^_^
pseudo
Claro, eso sería ya el turno del javascript, la solución solo CSS supone que el inferior sería de altura fija
xavib
... pero al no conocer la altura del contenedor inferior, ¿cómo puedo darle margen al contenedor superior?
Lo que marca es el de arriba...
pseudo
El contenedor genérico posición relativa.
Contenedor superior posición normal estática, con margen inferior igual de alto que el contenedor inferior.
Contenedor inferior posición absoluta, bottom:0
... pero te quedaría un hueco feo si el superior es cortito
mendi
Es complicado. Los campos inferiores no se pueden ajustar al tamaño restante porque no saben el espacio que les queda, ya que los campos superiores son variables. Personalmente me olvidaría del scroll y lo solucionaría con backgrounds. Por ejemplo los campos superiores fondo blanco y un background gris aplicado al contenedor, de manera que los campos inferiores lo mostrasen. Lo malo es que así renunciarías al scroll... alguien tiene otra idea?
xavib
nop, un dibujico
** me he cargado el dibujico porque he hecho otro más explicativo **
pero puedo subir algo a algun sitio si quieres. Pero no está funcionando, con lo que no se verá nada.
Cada columna es un "lo que debería pasar".
La altura del contenedor es siempre fija, la cosa es que cuando el superior crezca o decrezca, el inferior se adapte en de la altura restante. Si su contenido es más alto que el espacio que tiene mostrará un scroll (eso debería ser tan fácil como overflow:auto). Pero la cosa está en las alturas.
mendi
Tienes una prueba online?