Diseño gráfico, desarrollo web y software libre.
Igualar la altura de capas CSS mediante Javascript.
Maquetar páginas web con estilos CSS es una maravilla, creo que a estas alturas todos conocemos las múltiples ventajas frente a maquetar con tablas en HTML. Pero también es cierto que tiene sus inconvenientes, diseños que con tablas eran muy sencillos de realizar mientras que con CSS hay que buscar soluciones estrafalarias.
Un ejemplo lo tenemos en las páginas web de varias columnas, cuando deseamos que todos los bloques tengan la misma altura independientemente de su contenido. Algo que muchas veces es difícil de conseguir solo con estilos CSS.
Un truco que he encontrado hace poco y funciona bastante bien es usar JavaScript, en concreto jQuery, para igual la altura. El código a usar es el siguiente:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
})
Obviamente también hay que cargar las librerías de jQuery en la página en cuestión y señalar que capas queremos que se ajusten en altura, añadiendo el siguiente parámetro a cada DIV:
class="column"
Sencillo y eficaz. Aunque espero que en futuras versiones de CSS esto se pueda hacer directamente sin recurrir a trucos.
Fuente (inglés): cssnewbie.com
-
-
#2 escrito por Oswal hace 2 años
Hola elpoetaborracho, el código no lo he realizado yo, si te fijas al final de artículo hago referencia a la fuente. Respecto a tus preguntas:
-Se usa jQuery para hacer el proceso más sencillo y rápido, se podría hacer con javascript directamente pero habría que escribir un código mucho más largo, jQuery al ser un framework ya nos da el trabajo medio hecho, a costa de tener que cargar la librería por supuesto. Y sí, en ambos casos se necesita un navegador con javascript activado.
-Sobre tu segunda pregunta, desconozco cual puede ser la causa, si funcionaba antes y no has cambiado nada, no debería haber problemas. De todas formas yo ya no uso este truco, ahora prefiero no igualar la capas pero simularlo con un gráfico de fondo que se repite verticalmente, el efecto estético es el mismo y sin usar javascript.
-
-
#3 escrito por elpoetaborracho hace 2 años
Buenas, gracias por contestar, la verdad es que no me fije quien habia escrito el codigo, pero da igual, lo del jquery ya lo había leido, lo preguntaba porque para el mismo tema de columnas he visto códigos de unas seis lineas, con lo que no entiendo cual es el ahorro real en este caso concreto, imagino que para realizasr cosas más complejas pues si que será útil, y ya puesto ¿la librería es solo un documento repleto de codigo y que te vale para cualquier cosa que quieras hacer? es decir, ya tengo la librería esa, tan sólo tendría que aprender jquery ¿no?.
Y sobre el uso de CSS pues lo mismo, lo conocía, lo que pasa es que quería que las columnas estuvieran separadas con u borde y entre medio de las dos se vieran otras cosas de adorno, o un color diferente o alguna imagen, por lo que no se podría con CSS, o eso me parece.
De todas formas si quieres te pongo el enlace y lo ves, por si acaso si se puede usar CSS.
-
- Feed de comentarios de esta entrada
Buenas, una preguntita tonta, para que usar jquery si puedes usar javascript directamente, ¿no es más cómodo? te ahorras lo de la biblioteca y todo eso, o acaso con el jquery si la gente tiene desactivado el js sigue funcionando, se supone que no pq en esencia es lo mismo.
Segundo punto, usé tu código con la biblio y todo eso y funcionó bien hasta que dejo de funcionar,actualmente no me reconoce el código, el DW reconoce los enlaces y todo bien, y of course que no modifiqué el código.