javascript

Hay veces que nos encontramos con capas con alturas dinámicas a causa de su contenido, pero que no podemos redimensionarlas debido a que tenemos una altura fija, o hay otros elementos que impiden su visualización completa. Las soluciones que he podido encontrar me resultaban un poco chapuceras, ya que se limitaban a crear una capa fuera del area visible de la pantalla (valores negativos para top y left) con el contenido que iba a tener la capa y obtener su altura, obviamente después se eliminaba, pero no me convencía del todo.

La solución que propongo no es precisamente la mejor, pero es algo más elegante que crear contenido duplicado. Veamoslo:

Creamos la capa :

<div class=”contenido” id=”contenido”></div>

Y le damos formato:

.contenido{ width:400px; height:auto; overflow:hidden; }

Supongamos que la capa ya dispone de tal cantidad de contenido que se desborda y no podemos verlo a causa del atributo ‘overflow’. Con javascript hariamos lo siguiente:

Justo antes de cargar el contenido y al tener el atributo ‘height’ en auto tendremos que ocultar la capa:

var capa_contenido = document.getElementById(‘contenido’)

capa_contenido..style.visibility = ‘hidden’;

De esta manera el usuario no verá la capa, pero tampoco el contenido que se le fuese a añadir a continuación.

Una vez añadido el contenido, procedemos a obtener la altura de la capa, ponerle la altura correcta y volverla visible:

var altura = capa_contenido.offsetHeight;

capa_contenido.style.height = ’400px’;
capa_contenido.style.visibility = ‘visible’;

Ya podemos trabajar con la altura dinámica de la capa. Esto es muy útil, sobre todo, a la hora de trabajar con ajax o con capas con barra de desplazamiento y no se quiere usar el atributo ‘overflow:scroll’;.

PD: Antes de esto, estuve mirando jQuery pero las propiedades que me ofrecía (position() y offSet) no funcionan con capas o contenido oculto.