Nivelar altura de capas paralelas

Sí, se que suena medio matemático el título pero a lo que me refiero es al cómo hacer que dos capas (etiquetadas con DIV ); por ejemplo una capa derecha, que contenga enlaces y bloques de un sitio web; y una capa principal, que contenga artículos (como este blog) puedan nivelar sus alturas independientemente de cual de ellas sea más alta que la otra, tal y como lo haría una tabla con dos columnas. Y como una imagen vale más que mil palabras, estos son los resultados a los que queremos llegar:

Ejemplo de capas y jQuery

Maquetando el ejemplo

Para el ejemplo colocaremos dentro de las etiquetas body el siguiente maquetado:

<div id="contenedor"> <div id="columna" class="col"> test<br /> test<br /> test<br /> test<br /> </div> <div id="contenido" class="cont"> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> </div> </div

Nótese que el contenido de columna tiene menos texto que el de contenido, en otras palabras será menos alto que esta última.

Aplicando los estilos

Lo primero que haremos es generar nuestra hoja de estilos, esta constará de una capa contenedora a la que llamaremos contenedor y dos capas flotantes, una a la derecha llamada columna, y otra a la izquierda llamada contenido, los atributos que colocaremos a cada capa serán los siguientes:

<style type="text/css"> #contenedor{ width: 300px; float: none; clear: both; } #columna{ background-color:#FFCC99; width: 90px; float: right; } #contenido{ background-color:#66FFCC; width: 190px; float: left; } </style>

Lo que hemos hecho es básicamente posicionar las capas y aplicarle un color de fondo. Si ahora cargamos nuestra web en el navegador veremos que se mostrará con las capas desniveladas en altura.

Aplicando jQuery

Para nivelar las columnas deberemos usar JavaScript, para este ejemplo usaré una librería llamada jQuery , pero antes de ir al código veamos como se define jQuery:

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Lo que al español mas o menos quiere decir:

jQuery es una librería de JavaScript rápida y concisa que simplifica el trabajo con documentos HTML , maneja eventos, realiza animaciones, y agrega iteraciones de Ajax en tus páginas web. jQuery ha sido diseñado para cambiar tu forma de escribir JavaScript.

La librería de jQuery la pueden descargar desde su sitio web o en este enlace.

El código que usaremos para nivelar las capas va como sigue:

<script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ if ($("div#columna").height() > $("div#contenido").height()) { $("div#contenido").height($("div#columna").height()) }else{ $("div#columna").height($("div#contenido").height()) } }); </script>

En la primera línea llamamos a la librería jqueri.js. Luego llamamos al evento ready() que es muy similar al windows.onload, es decir, no permite que función alguna sea ejecutada a menos de que el DOM este listo para usarse.

Lo que hacemos en el condicional es comprobar si el alto de la capa columna es mayor que el alto de la capa contenido, si es así le asignamos a esta última el alto de la capa columna, en caso contrario hacemos lo opuesto. Para todo esto hacemos uso de la propiedad height() que nos calcula el alto de la capa, y de height(valor) para asignarle una altura.

Como ven el código no es muy complejo, como es obvio es posible de hacerse también con JavaScript puro, opté por jQuery porque lo estoy usando en el rediseño del sitio web de mi empresa.

Que disfruten 🙂

Deja un comentario