DIV que se alargue a lo alto según otro DIV que contiene

MikiBroki · #1 (**permalink**) 02/02/2007, 15:12

Se trata de que hay un div dentro de otro, y quisiera que si el de dentro crece lo haga también el contenedor, y si éste pasa de un height definido, se muestre el scroll (overflow:auto, en el contenedor)

Código:

<html>
    <body>
        
        
        <div id="divContenedor" style="
                                        height:200px;
                                        width:500px;
                                        background-color:red;
                                    ">
        
                <div id="divContenido" style="
                                                background-color:yellow;
                                                height:180px;
                                                width:200px;
                                                overflow:auto;
                                            ">
                aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/>
                </div>


        </div>
        
    </body>
</html>

Mikmoro · #2 (**permalink**) 02/02/2007, 16:35

Aupa. Prueba este código:

Código:

<html>
<head>
  <title>7</title>
  <style>
#divContenedor { background-color: red;
position: relative;
width: 500px;
padding-bottom: 20px;
}
#divContenido { background-color: yellow;
width: 200px;
overflow: auto;
max-height: 180px;
height:expression(
this.scrollHeight > 180? "180px" : "auto" );
position: relative;
}
  </style>
</head>
<body>
<div id="divContenedor">
<div id="divContenido">aaaaa<br />
<br />
aaaaa<br />
aaaaa<br />
<br />
aaaaa<br />
aaaaa<br />
<br />
aaaaa<br />
aaaaa<br />
<br />
aaaaa<br />
aaaaa<br />
<br />
aaaaa<br />
aaaaa<br />
<br />
aaaaa<br />
</div>
</div>
</body>
</html>

Mikel.

MikiBroki · #3 (**permalink**) 02/02/2007, 18:23

Gracias, pero el resultado es el mismo que el mío: cuando el contenido del div interior es mucho aparecen sus barras de scroll... no sigue creciendo hasta abajo y el que lo contiene con él.

EDITADO: ya lo he hecho (creo que estos días de uso intensivo de DIV me ha bloqueado un poco, menos mal que llega en fin de semana :p)

Código:

<html>
    <body>
        
        
        <div id="divContenedor" style="
                                        height:200px;
                                        width:500px;
                                        background-color:red;
                                        overflow:auto;
                                    ">
        
                <div id="divContenido" style="
                                                background-color:yellow;
                                                /*height:180px;*/
                                                width:200px;
                                                /*overflow:auto;*/
                                            ">
                aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/>bbbbbbb<br/>
                aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/> aaaaa<br/>bbbbbbb<br/>

                </div>


        </div>
        
    </body>
</html>

Mikmoro · #4 (**permalink**) 02/02/2007, 18:44

Parece que tenemos alguna pequeña dificultad de comunicación, porque otra vez que no te he entendido (ni el primer mensaje ni el segundo):

Cita:

Se trata de que hay un div dentro de otro, y quisiera que si el de dentro crece lo haga también el contenedor, y si éste pasa de un height definido, se muestre el scroll (overflow:auto, en el contenedor)

Lo que yo te he puesto creo que es exactamente eso, es decir, en primer lugar cuando crece el de dentro el de fuera también lo hace, y en segundo lugar, cuando alcanza un tamaño de 180px los dos se clavan y sale el scroll del de dentro. He dejado intencionadamente un pequeño espacio debajo del interior en el que se ve el exterior, porque en tu ejemplo lo ponías así y creía que era lo que querías.

Cita:

cuando el contenido del div interior es mucho aparecen sus barras de scroll... no sigue creciendo hasta abajo y el que lo contiene con él.

Y esto aún me desconcierta más: lo que querías era que aparecieran sus barras de scroll, ¿no? No decías que quisieras que creciera hasta abajo.

No obstante, en tu último código, cuando el de dentro decrece, el de fuera no se reduce con él.

Definitivamente no he entendido que querías hacer.

Mikel.

MikiBroki · #5 (**permalink**) 02/02/2007, 19:06

Nada no te preocupes,

En el primer mensaje incluí el código que tenía yo, y expuse lo que necesitaba. Quizás lo que ocasionó el malentendido fue decir:

", y si éste pasa de un height definido, se muestre el scroll"

... me refería a que necesitaba que se mostraran las barras de scroll pero en el contenedor, no en el div que está dentro (contenido), y que es el que tiene el texto de prueba.

Por otro lado, el código que me has facilitado no hace que el div de dentro crezca, se muestra el scroll del mismo modo que mi primer ejemplo.

En el segundo ejemplo ya sí me despisté al postear: efectivamente el div contenedor no crece según su div interno... no caí en ello al ser algo que quería saber, pero mostraba el scroll que era lo que necesitaba realmente.

Venga un saludo y gracias de nuevo

Mikmoro · #6 (**permalink**) 03/02/2007, 16:45

Cita:

Iniciado por MikiBroki

Por otro lado, el código que me has facilitado no hace que el div de dentro crezca, se muestra el scroll del mismo modo que mi primer ejemplo.

Sí, en el ejemplo que puse el div de dentro sí crece, y el de fuera con él, sólo que limitados a 180px, que era lo que creía que pretendías (me equivoqué

)

Prueba a dejar sólo una frase y los dos div se reducirán a esa frase; aumenta el límite de 180 a 380px (por ejemplo), y verás que ambos crecen hasta ahí antes de salir el scroll.

Desgraciadamente no era lo que pretendías hacer, así que no ha servido de mucho.

Lo que ahora creo que querías hacer era esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>7</title>
  <style>
#divContenedor { background-color: red;
position: relative;
width: 500px;
max-height: 380px;
overflow: auto;
height:expression(
this.scrollHeight > 380? "380px" : "auto" );
}
#divContenido { background-color: yellow;
width: 200px;
position: relative;
}
  </style>
</head>
<body>
<div id="divContenedor">
<div id="divContenido">aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
<br />
aaaaa<br />
</div>
</div>
</body>
</html>

Prueba a poner mayor y menor cantidad de texto. Ya dirás si funciona.

Mikel.

MikiBroki · #7 (**permalink**) 03/02/2007, 16:52

No te preocupes, estamos para ayudarnos en lo posible, no es una obligación para nadie, y ya me has sacado antes de un par de bucles infinitos con los DIVs (espero poder devolverte el favor en otra ocasión)

Mikmoro · #8 (**permalink**) 03/02/2007, 16:58

Seguramente respondías mientras yo editaba para poner la segunda parte del mensaje, en la que pongo el código que creo que se parece a lo que buscabas.

Ya dirás. Yo me lo paso realmente bien con esto, así que, encantado de probar todas las veces que haga falta hasta dar con la solución.

Un saludo.

Mikel.

MikiBroki · #9 (**permalink**) 04/02/2007, 04:11

A la perfección, muchas gracias !

Ánima · #10 (**permalink**) 04/02/2007, 11:54

Saludos, una cosa, he visto en un código que utilizabais:

height:expression(
this.scrollHeight > 180? "180px" : "auto" );

Sabeis algun sitio dónde expliquen como utilizar este tipo de expresiones?

Mikmoro · #11 (**permalink**) 04/02/2007, 12:14

Sí, puedes mirarlo aquí:

http://www.svendtofte.com/code/max_width_in_ie/

No te he respondido a tu último mensaje porque no es fácil, y no lo he mirado bien todavía.

Mikel.

aniMAYtions · #12 (**permalink**) 02/06/2009, 08:59

Eso está muy bien orientado para divs de un tamaño fijo, quiero decir, en píxeles.

Pero qué pasa si el tamaño se lo queremos dar en porcentajes?

Por ejemplo, io tengo el estilo de la siguiente manera

Código:

<style type="text/css"> 
html{ width:100%; height:100%; } 
body{  height:100%; } 
#principal
{ 
border:1px solid red;  
height:100%;
width:100%; 
color:#000000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:68.75%;
background:url(../img/bg_top.png) 0 0 repeat-x;
margin-top:-15px;
} 
</style>

Luego, dentro del body está el principal, dentro del principal una cabecera y seguidamente un radsplitter. Todo eio formateado con porcentajes.

Dentro del radsplitter tengo 2 radpanels, uno a la izquierda para el arbol y otro a la derecha para el contenido y cada radpanel con su div o divs correspondientes dentro.

La cosa está en que, aunque les estoy indicando un 100% al parecer el principal no crece, se queda ahí estancado y cuando el contenido del radpanel de contenido supera lo que principal ha establecido como 100% se queda ahí, cortado.

Gracias por la aiuda!!

kseso? · #13 (**permalink**) 02/06/2009, 10:13

Claro, es lo que cabría esperar que pase.
Ahora la parte que te ha faltado:
¿qué es lo que quieres que ocurra cuando el contenido de #principal supera el 100% en (supongo) altura?
Me imagino que esperas que siga creciendo la ventana del navegador hacia abajo y aparezca el scroll vertical.

¿Qué tal voy como adivino?

Si es eso, el padre de #principal (el body) no puede crecer ni sacar las barras de scroll (le has dicho que mida el 100% y sólo el 100%). Así que tendrás que hacer que aparentemente lo haga, pero el que debe sacar el scroll es su hijo (el #principal).
Así que a esa caja (#principal o como la llames) ponle la propiedad "overflow-y: auto"

Podrías utilizar min-height para el body, pero eso ie6 no lo entiende.
Todo lo anterior suponiendo que obligatóriamente body tenga que tener una altura de 100%. Si no es así, con borrar eso arreglado

Consejo para otra vez: cada consulta en su tema. Es más efectivo para que obtengas más respuestas específicas a tu consulta.

aniMAYtions · #14 (**permalink**) 03/06/2009, 02:28

Cita:

Iniciado por kseso?

¿qué es lo que quieres que ocurra cuando el contenido de #principal supera el 100% en (supongo) altura?

Sí, exacto, es en altura.

Cita:

Iniciado por kseso?

Si es eso, el padre de #principal (el body) no puede crecer ni sacar las barras de scroll (le has dicho que mida el 100% y sólo el 100%).

El 100% de la pantaia a lo largo, suponiendo que si el contenido crece a lo largo, el 100% debe ser maior que cuando comienza...

Cita:

Iniciado por kseso?

Así que tendrás que hacer que aparentemente lo haga, pero el que debe sacar el scroll es su hijo (el #principal).
Así que a esa caja (#principal o como la llames) ponle la propiedad "overflow-y: auto"

Si hago que saque las barras el contenedor, o sea, el principal me las saca dentro de la ventana. Y no, se supone que la barra debe de salir, siempre y solo la del navegador para la altura, cuando el contenido de la página sobrepase el límite de la misma en vertical.

Cita:

Iniciado por kseso?

Podrías utilizar min-height para el body, pero eso ie6 no lo entiende.
Todo lo anterior suponiendo que obligatóriamente body tenga que tener una altura de 100%. Si no es así, con borrar eso arreglado

He borrado los estilos del body y parece que principal crece... pero estoy empezando a reformatear todo, ia os conteré cuando termine, si consigo hacerlo.

Cita:

Iniciado por kseso?

Consejo para otra vez: cada consulta en su tema. Es más efectivo para que obtengas más respuestas específicas a tu consulta.

Este tema lo encontré buscando información al respecto de mi problema y pensé que sería mejor consultar mi duda aquí, ia que va relacionada con el tema que se expone, y no abrir un nuevo post. Siento si me confundí.

Gracias por la aiuda.

kseso? · #15 (**permalink**) 03/06/2009, 04:22

Cita:

El 100% de la pantaia a lo largo, suponiendo que si el contenido crece a lo largo, el 100% debe ser maior que cuando comienza...

No, le has dicho que ocupe el 100% para siempre, sin excepciones. Así que como es muy obediente es lo que hace. Cuando le das ese tamaño, no es un tamaño mínimo ni máximo, es ese exactamente.

Algo que seguramente ya sepas:
El tamaño en porcentaje siempre tiene que tener un valor concreto como referencia. Y por la ley de la herencia en css, toma ese valor respecto a su ancestro más próximo que tenga definido un tamaño.
En tu caso, #principal con su "height:100%; width:100%;" busca el valor de referencia para calcular su tamaño en su padre (body), pero como también es 100%, se remonta a su abuelo, que en este caso es "html" que también es "height:100%; width:100%;", valor que el navegador calculará de la única referencia que le queda, la ventana del navegador.

A groso modo, y sin tener en cuenta otros factores o elementos que influyan, si quieres que una caja aumente de tamaño según el contenido que aloja, no le definas medidas.

Celebro que solucionases tu incidencia.
Un saludo, Anymations

aniMAYtions · #16 (**permalink**) 03/06/2009, 05:29

Gracias kseso?

Como dije le quité los estilos al body y además le puse un br con clear:both entre el cuerpo y el principal(dentro de principal están la cabecera y el cuerpo).

Pero ahora me surge otro problema al parecer maior.
Y es que claro, un div me crece cuando le meto contenido ahí a webo. Lo que pasa es que, dentro de cuerpo hay otros 2 divs más(ahora estoy trabajando sin el radsplitter hasta que todo cuadre); uno que contiene el arbol y que crece sin problemas y el otro que lleva el contenido. Contenido que coge de un iframe y es ahí donde está el problema.
He puesto una función para que me cambie el tamaño del div que contiene el iframe("contenido") de la siguiente forma:

Código:

function ajustar(altura) 
{
      document.getElementById("contenido").style.height = altura;
}

La cosa está en que en cada página que puede cargar el iframe estoy intentando hacer una función que calcule el tamaño de sí misma, respecto a los elementos que tiene en un momento determinado.
He probado con currentStyle.height y offsetHeight aplicado tanto a un body como a un div. Esto valdría si cualquiera de los 2(al que le haga el cálculo) tuviera determinado un tamaño en píxeles. Pero al estar todos en porcentajes no hay forma. Me da el porcentaje, pero no me calcula el tamaño en píxeles, como decía, dependiento de los elementos que contenga.

Hay alguna manera de hacer esto??

Gracias de nuevo

kseso? · #17 (**permalink**) 03/06/2009, 05:46

Anymaytions.

Teniendo en cuenta que este tema lo comenzó otro usuario y que la duda es algo totálmente ajeno, yo te recomendaría que edites tu último mensaje y abras un tema nuevo para él.
Recibirás más y mejores respuestas.

Si lo haces así, después reporta a los

usando el icono de la izquierda

para que borren tu mensaje anterior (ya publicado en el tema nuevo) y esta sugerencia.

Un saludo

P.D.: si el div que aloja al frame y no crece está "flotado" y sin altura definida prueba con "overflow:auto" (pero pon algo de código css y html en el nuevo tema si lo trasladas)