Ver Mensaje Individual
  #6 (permalink)  
Antiguo 02/08/2007, 07:15
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 1 mes
Puntos: 45
Re: Igualar alturas de bloques laterales con DHTML

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 ametconsectetuer adipiscing elitVivamus at enim adipiscing ligula suscipit sollicitudinDuis enim elitconsequat nondictum vitaeluctus sedjustoDonec consequat mauris et nullaNullam interdum feugiat liberoCras quis sapienNunc adipiscingleo id egestas mattisleo nunc hendrerit miut vulputate elit lectus sed elitNullam orciVestibulum ut felis et orci venenatis vulputateSuspendisse ultriciesVestibulum tempor ipsum a maurisCras at anteVivamus interdumenim bibendum vulputate dictumlectus nunc blandit mieu pellentesque ipsum nunc eget ipsumCras estCurabitur sollicitudin turpis sit amet velit semper sagittisIn quis eros.</p>

<
p>Donec in urnaNullam sit amet orciVestibulum non maurisDonec nonummy massa luctus lectusNunc dictumNam placerat lorem vitae nisiDonec lacinianisl ac tempus fermentumdui libero rutrum velitet luctus nisl neque ut estQuisque vehicula lorem in magna facilisis dapibusLorem ipsum dolor sit ametconsectetuer adipiscing elitSuspendisse pellentesque faucibus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeos.</p>

<
p>In venenatis nisl suscipit elitInteger temporAenean pedeQuisque tristique convallis ipsumVivamus vehiculanisi et volutpat pellentesquelectus orci convallis enimut cursus pede ligula ut quamFusce volutpat iaculis lectusQuisque odioCurabitur tincidunt tincidunt felisVestibulum luctus diam at anteMorbi nec tellus sit amet ipsum elementum iaculisAliquam bibendum ante a estMorbi a enimNam elit estmalesuada aeuismod idauctor molestiediamDuis in est in nisl iaculis portaPellentesque vel odioDonec quis nisiSed vel magna.</p>

<
p>Etiam blandittellus ut varius sollicitudinnibh mi accumsan loremeu hendrerit leo elit nec ipsumAliquam orci mifeugiat idpulvinar quisposuere vitaevelitSed a nuncEtiam pellentesque sapienVestibulum congue aliquam nisiAenean eleifend malesuada nibhNunc vulputate nonummy dolorInteger bibendumrisus vitae aliquet tempusurna ipsum hendrerit metusvel blandit nisi mauris sed nequeAenean ullamcorpermetus eu adipiscing imperdiettellus elit feugiat mivitae posuere risus lacus et velitNulla facilisiVestibulum non diamAenean lacus velitfacilisis acelementum atposuere inarcuPellentesque rutrum pede nec augueCurabitur ornare sapien sit amet nullaPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasAenean purus odioullamcorper utvehicula eumalesuada utdiamNam rhoncusvelit vel aliquam rhoncuslectus sapien pretium nullaeget congue dolor nunc nec augueAenean eget duiInteger eu libero at purus sodales tinciduntInteger nec erat id neque gravida varius.</p>

<
p>Proin facilisiseros vel cursus cursusenim mauris interdum ligulasemper pretium enim ligula ut sapienProin rhoncusMauris blandit egestas duiInteger risus arcususcipit posuerevestibulum etcommodo neceratSed facilisisneque non suscipit bibendummagna nunc ullamcorper justoat porta ipsum leo in lacusNullam eu loremCurabitur iaculis rhoncus tellusNullam vel lacusDuis rhoncus dapibus ligulaSuspendisse quis magnaCras venenatis porttitor erosCurabitur ultrices malesuada odioVivamus pharetra turpis eget tellus tristique consequatPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasPhasellus condimentum ligulaCras urna lectustempus atnonummy blanditiaculis nonodioInteger leoProin 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.maxhColIzqhColDer ) +"px";
}


</script>
</body> 

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


Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.