jueves, 22 de febrero de 2007

Altura mínima y dinámica de divs de css usando js

Muchas veces tenemos, por ejemplo, un menú lateral con un determinado fondo y queremos que cuando el contenido central vaya creciendo pues el color del menú se extienda hasta abajo.

Esto se logra con un js que me encontré, para llamarlo basta citarlo con la ruta correspondiente (quitar los espacios después del '<'):

< script language="JavaScript" src="./column.js">< /script>


...ahora sí: la función js:


// by Paul@YellowPencil.com and Scott@YellowPencil.com
// feel free to delete all comments except for the above credit

function setTall() {
if (document.getElementById) {
// the divs array contains references to each column's div element.
// Replace 'center' 'right' and 'left' with your own.
// Or remove the last one entirely if you've got 2 columns. Or add another if you've got 4!
var divs = new Array(document.getElementById('contenido'), document.getElementById('enlaces'), document.getElementById('menu'));

// Let's determine the maximum height out of all columns specified
var maxHeight = 0;
for (var i = 0; i < divs.length; i++) {
if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;

}

// Let's set all columns to that maximum height
for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxHeight + 'px';

// Now, if the browser's in standards-compliant mode, the height property
// sets the height excluding padding, so we figure the padding out by subtracting the
// old maxHeight from the new offsetHeight, and compensate! So it works in Safari AND in IE 5.x
if (divs[i].offsetHeight > maxHeight) {
divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
}
}
}
}

window.onload = function() {
setTall();
}

window.onresize = function() {
setTall();
}

4 comentarios:

Luis Ángel dijo...

Muchas Gracias! Muy funcional el código. Me sacó de apuros!!!!

Unknown dijo...

De nada, me alegra que te haya sido útil

Pedro dijo...

Me salvaste la vida. Jaja Ni pense que me iba a funcionar, ni lo estaba buscando, pero lo probe y me salvo!

Gracias.
Un saludo,
Pedro

Unknown dijo...

Pues parece que el truco va bastante bien. Me alegro que os sirva a todos.