Columnas de igual tamaño con jQuery

0 - , - 03/02/2009 15:00:00

En cssnewbie me he encontrado una función para obtener columnas de igual tamaño. Cuando trabajamos con CSS, a veces puede resultar frustrande obtener columnas de igual tamaño. Un ejemplo de aplicación de la función sería:

1.- Supongamos que tenemos una estructura típica de HTML similar a ésta:

<div id="contenedor">
     <div id="navegacion">Lo que sea 1</div>
     <div id="contenido">Lo que sea 2</div>
</div>

Para que, independientemente del contenido que haya tanto en "navegacion" como en "contenido", las dos columnas tengan la misma altura deberíamos...

2.- Añadir una clase a las columnas que tengan la misma altura.

<div id="contenedor">
     <div id="navegacion" class="columnas">Lo que sea 1</div>
     <div id="contenido" class="columnas">Lo que sea 2</div>
</div>

3.- Añadir tanto la librería como la función "equalHeight"creada en cssnewbie y la llamada a dicha función especificando los elementos que deseamos igualar en altura. En nuestro caso los dos div con la clase "columnas".

<script type="text/javascript" src="jquery-1.2.6.js">
<script language="javascript">
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".columnas"));
});

Ver ejemplo en funcionamiento » »

Más información en "Equal Height Columns with jQuery"

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha