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/en-us/library/ms534199(VS.85).aspx
[2] http://developer.mozilla.org/en/docs/DOM:element.offsetHeight

21 thoughts on “Columnas de igual altura usando Javascript”

  1. Excelente!!!

    Justo se me hab铆a ocurrido que se podr铆a solucionar de la forma que lo has planteado, pero鈥, no s茅 por qu茅, ya que adhiero a uno de los conceptos que tu citas acerca de usar soluciones existentes鈥, busqu茅 en la web y apareci贸 como por arte de magia tu soluci贸n la cual apliqu茅 con excelentes resultados.

    Debo decirte tambi茅n que originalmente le hab铆a escapado a esta soluci贸n javascript, aplicando a nivel hoja CSS overflow:hidden, pero la misma no me result贸 aplicable en algunos casos, as铆 que 驴隆es necesario ser tan purista!?, a veces鈥, 驴no deber铆amos aplicar un conjunto de soluciones (heterogeneas) para lograr los resultados esperados?

    Muchas gracias.

    PD: f铆jate que hay un errorcito en la funci贸n mayor(), yo finalmente apliqu茅 las que usaste en la p谩gina de ejemplo鈥

  2. Gracias por comentar lo del error en la funci贸n mayor(), ya est谩 solventado 馃檪

    Sobre lo que comentas de ser puristas, en cada momento hemos de decidir que tecnolog铆a usamos y si sabemos el por qu茅 de cada una de nuestra deciciones podremos estar tranquilos con nuestro trabajo. No tenemos que olvidar que hay tantas posibles soluciones a un problema como gente decida abordarlo.

  3. EXCELENTE!!!!!!!!!!!!!!!!! QUE BUEN SCRIPT!!
    Sinceramente, no entend铆a como iba a funcionar si el script q igualaba estaba al final.. pero.. cada vez uno aprende mas…
    TE FELICITO DE VERDAD!!! LO MEJOR

  4. muchas gracias, tu funci贸n me ha quitado mil quebraderos de cabeza. Que pena que no exista posibilidad de hacer esto mediante css 驴no?

    soy bastante nuevo pero muy cabez贸n y hay cosas que estar铆a bien implementar en el css y a lo mejor existen pero no lo se.

    Por ejemplo
    El ancho con bordes,
    ser铆a genial poder decir en css:
    width:100%-2px;
    border:1px black solid;

    o poder utilizar el resto de porcentaje combinando px y porcentajes.

    Por ejemplo (abrevio los float y dem谩s)

    <div id=“izq” width:“50px”></div>
    <div id=“derecha” width=“100%-50px”></div>

    eso ayudar铆a mucho a la hora de adaptar.

    Lo mismo con height y con width.
    podr铆a hacerse una funci贸n del tipo
    combinar_anchura (derecha, 50px)

    Gracias por vuestro c贸digo otra vez.

  5. Yo tambi茅n llegu茅 a la conclusi贸n, despu茅s de probar varias cosas, de que lo mejor para estos casos era usar javascript. Hay una t茅cnica con css para conseguirlo, pero da problemas con las anclas. En csslab la explican: http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/
    En cuanto a la f贸rmula m谩gica que buscabas, creo que puede ser esta: http://www.sitepoint.com/examples/3col.html que para variar, s贸lo funciona en navegadores buenos…
    Saludos.

  6. Hola, yo justo tuve que hacer exactamente lo mismo como hace una semana. Y tambi茅n lo resolv铆 con js, pero en el camino tuve que hacer como 3 funciones m谩s para que sea compatible con todos los browsers (para variar ie, opera y ff), como por ejemplo offsetHeight no da los mismos resultados en ie y ff, ya que al agregarle border o padding al div, la medida cambia.

    Muy interesante eso que en css se pueda usar js

    Saludos

  7. Que tal magnifica solucion. Actualmente me encuentro redise帽ando y ajustando algunos aspectos de mi site yo habia intentado con margin negativo y padding y el overflow pero a la hora d usar anclajes el div se veia horrible pero con esta solucion todo es perfecto Gracias.

  8. Millones de Gracias! lo 煤nico que encontr茅 que me fu茅 煤til y muy sencillo de implementar.

  9. NO!!! Al igual que varios de nosotros, no soy un experto en el dise帽o de p谩ginas web. Pas茅 horas buscando trucar de alguna forma el CSS para igualar la altura de las columnas.
    No sab茅s lo que agradezco haberme encontrado con este post.
    No tengo m谩s que un GRACIAS para decirte.

    Es realmente un bien a la comunidad publicar este tipo de cosas.

    Saludos!

  10. Estoy montando una web a dos columnas en Textpattern (o sea el contenido es din谩mico) y no me funciona la primera vez que carga la p谩gina pero si cuando vuelvo a recargar la p谩gina.
    O sea, el script trabaja cuando actualizamos nuevamente la p谩gina
    Que estar茅 haciendo mal ?
    Saludos y gracias

  11. Hola Fer,

    si nos dejas la URL donde podamos ver la Web o nos proporcionas el c贸digo HTML generado quiz谩s podr铆amos ayudarte mejor. Si prefieres m谩ndame un privado y hablamos 馃檪

  12. Hola, la solucion esta muy bien, pero…
    No pasa el validator de W3c, es una mierda, pero muchos necesitamos codigo validado. No se puede tener todo ;-(

    gracias de todas formas

Leave a Reply

Your email address will not be published. Required fields are marked *