Ajustar dinámicamente el height de un Div

eljuank1982 · #1 (**permalink**) 25/01/2011, 08:08

Hola a todos:
Necesito ajustar dinámicamente el height de de un div. en función del tamaño de otro div.

La cosa es que quiero asignarle un height por defecto al div1 pero que si el height del div2 excede el height del div1 entonces que el height del div1 sea igual al height del div2. Y que esto pase constantemente que constantemente el div1 mantenga la altura por defecto asignada inicialmente y que constantemente se guie por si aumenta o no la altura del div2.

Esto lo iba a postear en el apartado dedicado a css aquí en forodelweb pero por lo que he leído lo que quiero solo se logra con Js manipulando al css.

Tengo clara la idea pero no sé cómo plasmarla en una función Js ya que no sé casi de Js.
Sí alguno de ustedes me puede poner cómo hacerlo y también que me puedan decir dónde puedo encontrar un buen libro gratis (soy cubano y vivo en Cuba) que trate sobre manipulación de css con Js.

Salu2 y gracias de antemano.

IsaBelM · #2 (**permalink**) 25/01/2011, 09:05

usa la propiedad scollHeight

eljuank1982 · #3 (**permalink**) 26/01/2011, 10:44

Perfecto, por lo menos acceso a la propiedad del div ejemplo div1; ahora el problema es que quiero que el el div2 me tome también esa altura y que esto suceda encuanto se termine de cargar el div1.
Ya sé que acceso a la propiedad porque usé esto para darme cuenta:

<script language="javascript">
function mostrar() {
alert(document.getElementById("contenido").scrollH eight)
}</script>

<div id="contenido"
onMouseOver="mostrar()">

Pero de que forma hago que pase lo que quiero, que el height del div2 se establezca por el height del div1¿?

Saludos y gracias

Javier01 · #4 (**permalink**) 26/01/2011, 13:03

prueba con

Código Javascript:

Ver original<script language="javascript">
function mostrar() {
    document.getElementById("contenido2").style.height = document.getElementById("contenido1").scrollHeight;
alert (document.getElementById("contenido2").scrollHeight);
}
</script>

Código HTML:

Ver original<div div id="contenido1" onMouseOver="mostrar()" style="height: 60px;  BORDER: #000 1px solid ;" ></div>
<div div id="contenido2"  style="height: 100px;  BORDER: #000 1px solid ;" ></div>

saludos

eljuank1982 · #5 (**permalink**) 26/01/2011, 15:02

Muchas gracias:
Esto me funciona perfecto pero con con onmouseover o sea así:

function remimencionar() {
document.getElementById("menulateral").style.heigh t = document.getElementById("contenido").scrollHeight;
}
<div id="contenido"
onmouseover="remimencionar()">

Pero quiero que esto suceda cuando termine de cargar el div "contenido".

Saludos y al tanto.

Javier01 · #6 (**permalink**) 27/01/2011, 12:41

y que tal si lo agregas en el evento onload del body:

Código HTML:

Ver original<BODY onLoad="javascript:remimencionar()" >

Sino tambien puedes hacer una llamada a la función, debajo del html del div:

Código HTML:

Ver original<div id="contenido">contenidoooooo</div>
<script language="javascript">
     remimencionar();
<script>

eljuank1982 · #7 (**permalink**) 27/01/2011, 15:18

Sí muchísimas gracias ya lo había hecho por el Body.
Ahora el problema es otro, sé que no deví haber abierto otros popst con un tema tan similar y más porque aún no resuelvo del todo.
Sígue este post a ver si me puedes ayudar: http://www.forosdelweb.com/f13/funci...-no-ff-880519/

Muchas gracias y al tanto.
Salu2

eljuank1982 · #8 (**permalink**) 27/01/2011, 15:19

Sí muchísimas gracias ya lo había hecho por el Body.
Ahora el problema es otro, sé que no deví haber abierto otros popst con un tema tan similar y más porque aún no resuelvo del todo.
Sígue este post a ver si me puedes ayudar: http://www.forosdelweb.com/f13/funci...-no-ff-880519/

Muchas gracias y al tanto.
Salu2