Spartan Code – Blog

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>
<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"));
});
</script>

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