destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

Columnas de igual tamaño con jQuery

, 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"

Páginas: 1
comentarioscomentarios