Igualar alturas de bloques laterales con DHTML

Tigervlc · #1 (**permalink**) 01/08/2007, 10:43

Hola, dentro de la estructura de mi página, tengo dos bloques laterales, colIzq y colDer, cuyas alturas cambian dependiendo del contenido. Lo que quiero es que cuando se cargue el documento, la altura del más pequeño se iguale a la altura del más alto, quedando ambos a igual altura.

Entonces, lo primero que hago es llamar a una función cuando se carga el documento:

Código HTML:

<body onload="javascript:igualarAlturas();">

Y la función es así, pero no debo hacerla bien porque no obtengo ningún resultado:

Código:

function igualarAlturas() {
	var colIzq = document.getElementById('colIzq'); // Ambos bloques los tengo identificados como colIzq y colDer respect.
	var colDer = document.getElementById('colDer');
	hColIzq = colIzq.style.height;
	hColDer = colDer.style.height;
	
	if (hColIzq > hColDer) {
		colDer.style.height = colIzq.style.height;
	} else {
		colIzq.style.height = colDer.style.height;
	}
}

Alguna ayuda?

Tigervlc · #2 (**permalink**) 01/08/2007, 16:41

Alguna ayudita?

porfa!

Comprobando mediante alerts lo que deberían ser las alturas de cada bloque antes de reasignarlas, resulta que no me sale ningún valor. La verdad es que en CSS no les había especificado ningún height previamente, pero pensaba que al crearse los bloques, automáticamente tendrían cada uno un atributo o propiedad height implícita con su valor correspondiente.

Cómo puedo manipular las alturas una vez descargada la página? o sea, dinámicamente.

derkenuke · #3 (**permalink**) 01/08/2007, 17:37

Creo que la propiedad que buscas al no haber asignado ningun height en el CSS, es la altura en píxeles que ocupa dentro del documento cualquier elemento del DOM:

elemento.offsetHeight.

Con eso hallaríamos lo que tú intentabas con hColIzq y hColDer.

Un saludo.

Tigervlc · #4 (**permalink**) 02/08/2007, 02:39

Hola derkenuke, gracias por echarme una mano.

He probado lo que dices:

(....)
hColIzq = colIzq.style.offsetHeight;
hColDer = colDer.style.offsetHeight;
alert("Altura Noticias: " + hNoticias + " Altura Contenido: " + hContenido);
(....)

y en el alert, mientras que con height no me aparecía nada, o sea:

Altura Noticias: Altura Contenido:

ahora con offsetHeight me aparecen los valores como undefined:

Altura Noticias: undefined Altura Contenido: undefined

sigue fallando algo...

Tigervlc · #5 (**permalink**) 02/08/2007, 02:47

ooops!

perdona, el offsetHeight era propiedad del elemento, no de style. Ahora sí que obtengo los valores de las alturas.

El problema es que al reasignar alturas para igualarlas en la segunda parte de la función, no me hace caso:

if (hColIzq > hColDer) {
colDer.style.height = hColIzq;
} else {
colIzq.style.height = hColDer;
}

los fondos de ambos bloques se siguen viendo descompensados. Y también lo he probado reasignando el valor a la propiedad offsetHeight:

if (hColIzq > hColDer) {
colDer.offsetHeight = hColIzq;
} else {
colIzq.offsetHeight = hColDer;
}

derkenuke · #6 (**permalink**) 02/08/2007, 07:15

A mi sí que me ha funcionado de esta manera:

Código PHP:

      hColIzq = colIzq.offsetHeight;
    hColDer = colDer.offsetHeight;
    alert("izq: " + hColIzq + "; der: " + hColDer + ";");
    if (hColIzq > hColDer) {
        colDer.style.height = hColIzq;
    } else {
        colIzq.style.height = hColDer;
    }

Te paso el código completo para que veas que funciona bien, y una alternativa por si acaso no te gusta tanto if.

Código PHP:

  <body onload="igualarAlturas();">

<div id="colIzq" style="float:left; background-color:red; width:300px;">&nbsp;</div>

<div id="colDer" style="float:left; background-color:blue; width:400px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus at enim adipiscing ligula suscipit sollicitudin. Duis enim elit, consequat non, dictum vitae, luctus sed, justo. Donec consequat mauris et nulla. Nullam interdum feugiat libero. Cras quis sapien. Nunc adipiscing, leo id egestas mattis, leo nunc hendrerit mi, ut vulputate elit lectus sed elit. Nullam orci. Vestibulum ut felis et orci venenatis vulputate. Suspendisse ultricies. Vestibulum tempor ipsum a mauris. Cras at ante. Vivamus interdum, enim bibendum vulputate dictum, lectus nunc blandit mi, eu pellentesque ipsum nunc eget ipsum. Cras est. Curabitur sollicitudin turpis sit amet velit semper sagittis. In quis eros.</p>

<p>Donec in urna. Nullam sit amet orci. Vestibulum non mauris. Donec nonummy massa luctus lectus. Nunc dictum. Nam placerat lorem vitae nisi. Donec lacinia, nisl ac tempus fermentum, dui libero rutrum velit, et luctus nisl neque ut est. Quisque vehicula lorem in magna facilisis dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pellentesque faucibus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>

<p>In venenatis nisl suscipit elit. Integer tempor. Aenean pede. Quisque tristique convallis ipsum. Vivamus vehicula, nisi et volutpat pellentesque, lectus orci convallis enim, ut cursus pede ligula ut quam. Fusce volutpat iaculis lectus. Quisque odio. Curabitur tincidunt tincidunt felis. Vestibulum luctus diam at ante. Morbi nec tellus sit amet ipsum elementum iaculis. Aliquam bibendum ante a est. Morbi a enim. Nam elit est, malesuada a, euismod id, auctor molestie, diam. Duis in est in nisl iaculis porta. Pellentesque vel odio. Donec quis nisi. Sed vel magna.</p>

<p>Etiam blandit, tellus ut varius sollicitudin, nibh mi accumsan lorem, eu hendrerit leo elit nec ipsum. Aliquam orci mi, feugiat id, pulvinar quis, posuere vitae, velit. Sed a nunc. Etiam pellentesque sapien. Vestibulum congue aliquam nisi. Aenean eleifend malesuada nibh. Nunc vulputate nonummy dolor. Integer bibendum, risus vitae aliquet tempus, urna ipsum hendrerit metus, vel blandit nisi mauris sed neque. Aenean ullamcorper, metus eu adipiscing imperdiet, tellus elit feugiat mi, vitae posuere risus lacus et velit. Nulla facilisi. Vestibulum non diam. Aenean lacus velit, facilisis ac, elementum at, posuere in, arcu. Pellentesque rutrum pede nec augue. Curabitur ornare sapien sit amet nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean purus odio, ullamcorper ut, vehicula eu, malesuada ut, diam. Nam rhoncus, velit vel aliquam rhoncus, lectus sapien pretium nulla, eget congue dolor nunc nec augue. Aenean eget dui. Integer eu libero at purus sodales tincidunt. Integer nec erat id neque gravida varius.</p>

<p>Proin facilisis, eros vel cursus cursus, enim mauris interdum ligula, semper pretium enim ligula ut sapien. Proin rhoncus. Mauris blandit egestas dui. Integer risus arcu, suscipit posuere, vestibulum et, commodo nec, erat. Sed facilisis, neque non suscipit bibendum, magna nunc ullamcorper justo, at porta ipsum leo in lacus. Nullam eu lorem. Curabitur iaculis rhoncus tellus. Nullam vel lacus. Duis rhoncus dapibus ligula. Suspendisse quis magna. Cras venenatis porttitor eros. Curabitur ultrices malesuada odio. Vivamus pharetra turpis eget tellus tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus condimentum ligula. Cras urna lectus, tempus at, nonummy blandit, iaculis non, odio. Integer leo. Proin bibendum lacus quis pede.</p>
</div>



<script type="text/javascript">function igualarAlturas() {
    var colIzq = document.getElementById('colIzq'); // Ambos bloques los tengo identificados como colIzq y colDer respect.
    var colDer = document.getElementById('colDer');
    hColIzq = colIzq.offsetHeight;
    hColDer = colDer.offsetHeight;
    //alert("izq: " + hColIzq + "; der: " + hColDer + ";");
    /* //Esto funciona
    if (hColIzq > hColDer) {
        colDer.style.height = hColIzq;
    } else {
        colIzq.style.height = hColDer;
    } */
    //Aunque creo que sería más legible esta línea sólo
    colDer.style.height = colIzq.style.height = Math.max( hColIzq, hColDer ) +"px";
}


</script>
</body>

Probado en IE6 y en FF2, todo a la perfección.

Un saludo.

Tigervlc · #7 (**permalink**) 02/08/2007, 13:50

Aha! Muchas gracias! Ya he encontrado el fallo al ver tu código. Olvidé de añadirle "px" a los valores que asignaba. Ya está arreglado.

Y doblemente gracias porque ese método cortito de usar Math.max() la verdad es que nunca se me había ocurrido, y ahorra código y transparencia.

Un cordial saludo!