Nosoynadie.net

Columnas de igual altura usando Javascript

Hoy mismo, en el trabajo, un compañero me ha preguntado por el método CSS para hacer que dos divs adyacentes tengan la misma altura. Como siempre, comencé a rascar en lo más hondo de mi cerebro, elucubrar teorías chorra, buscar en Internet, etc para, al final, reconocerle que no tenía ni idea :-(

Estuve leyendo, no mucho tiempo os lo reconozco, sobre si había una propiedad de las hojas de estilo que hiciera esto y no encontré la fórmula mágica que buscaba. Encontraba soluciones utilizando JavaScript pero las desechabamos por la, quizas erronea, idea que el uso de Javascript no es compatible con la creación de páginas accesibles (no estoy del todo seguro de esto pero lo dejaremos para otra charla). Dentro de estas soluciones, otro compañero me remitió al código fuente de la página de inicio personalizada de Google del que os pongo las primeras líneas:

<style>
.modbox .el {display:;}
.modbox .csl, .modbox .es {display:none;}
.modbox_e .el {display:none;}
.modbox_e .csl, .modbox .es {display:;}
.dm {position:relative;width:1px;height:1px;}
.fres {width:expression(_gel("ffresults").offsetWidth+"px");overflow:hidden;}
</style>

Fijaros en la última línea, donde pone: width:expression(). Os lo reconozco, jamás había oido hablar de la utilización de Javascript, dentro de las hojas de estilo, para dar valor a ciertas propiedades (según tengo entendido está disponible desde IE5). Alucinado por el descubrimiento (¿con qué poco me contento, eh?) me decido a probarlo pero descubro que el método en cuestión no me funciona en Firefox y si en IE6.

Levemente decepcionado decido tirar por la calle de enmedio y acabar el proceso aunque sea utilizando Javascript. Y diréis, ¿por qué no utiliza alguna de las soluciones existentes? Y yo os digo, ¿por qué no usar una mia? Tras ver en el ejemplo de Google el uso de la propiedad offsetWidth, supongo que exista la equivalente offsetHeight, [1] y [2], decido crearlas sencillas funciones que se encargarán de igualar la altura de los divs que desee.

La función que se encarga de igualar los divs es altura(), que recibe como argumento los nombre -separados por comas- de los divs a tratar. Ló único que hace es averiguar cual es el div con mayor altura, y ese valor asignarselo a los demás.

 

function altura(){
  al = new Array(); max = 0;
	try{
	  if(document.getElementById){
		  for(i=0;i<arguments.length;i++){
			if(document.getElementById(arguments[i]))
			  al[i] = document.getElementById(arguments[i]).offsetHeight;
		  }
		  max = mayor(al);
		  if(max > 0){
			for(i=0;i<arguments.length;i++){
			  if(document.getElementById(arguments[i]))
				document.getElementById(arguments[i]).style.height = max + 'px';
			  }
		  }
	  }
	}
	catch (exc) {
	  alert("Se ha producido un error en la carga del CSS.");
	  throw exc;
	}
}

Y la función mayor() que calcula el mayor de entre los valores de una array.

 function mayor(datos){  
  salida = 0;  
  for(i=0;i<datos.length;i++){  
	  if(parseInt(datos[i]) > salida )  
	  	  salida = datos[i];  
  }  
  return salida;
}

Un ejemplo del uso de estas funciones sería, para el caso de querer igular dos divs llamados 'izq' y 'der':

<script type='text/javascript'>altura('izq', 'der');</script>

Para los que queráis ver todo esto en acción aquí tenéis un ejemplo

[1] http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp
[2] http://developer.mozilla.org/en/docs/DOM:element.offsetHeight