Calcular el height del DIV de contenido

zsamer · #1 (**permalink**) 08/09/2006, 06:32

Hola

El caso es el siguiente, tengo dos columnas DIV una a la izquierda y otra a su derecha, el DIV de la izquierda corresponde al menú de la página y el DIV de la derecha es más ancho y corresponde al contenido dinámico del sitio, este ultimo su altura es variable, depende del contenido que muestra de la base de datos (es de height auto).

Necesito poder calcular mediante onload el height de DIV de contenido para que el DIV de la derecha ajuste su altura en forma automatica al contenido de otro DIV.

Es posible con js?

se me ocurre algo por el estilo pero no se como hacerlo con js:

Luego de que ha cargado por completo la página (evento onload) debería capturar la altura actual de ambos DIV's
Comparar ambas alturas para ver cual de las 2 es mayor
Al que tiene menor altura se debería asignar la misma altura que el otro. Esto se debería lograr redefiniendo su altura mediante CSS (utilizando Javascript).

desde ya muchas gracias

salu2

zsamer

JavierB · #2 (**permalink**) 08/09/2006, 08:07

Hola zsamer

Prueba poniendo un id al div: <div id="algo">

y utilizando este código:

alto = document.getElementById('algo').offsetHeight;

Saludos,

zsamer · #3 (**permalink**) 08/09/2006, 09:48

gracias, pero no soy muy experto en el tema, como se tendría que hacer.

este es el codigo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>footerStick - Footer sticks to bottom of page</title> 
 
<style> 
html,body { 
    height:100%; 
} 
 
#contenedor{ 
    width: 100%; 
    height: auto; 
    background-color: #999999; 
    border: 1px solid red; 
} 
 
 
#menu_izda{ 
    float: left; 
    width: 250px; 
    margin: 0; 
    background-color: red; 
    height: 100%; 
    border: 1px solid blue; 
} 
 
 
#contenido{ 
    margin-left: 254px; 
    height: auto; 
    background-color:#cccccc; 
    border: 1px solid yellow; 
} 
 
</style> 
 
</head> 
 
<body> 
 
<body> 
 <div id="contenedor"> 
 
    <div id="menu_izda"> 
    Left Col<br> 
    This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. 
    </div> 
 
 
    <div id="contenido"> 
        Contenido<br> 
        This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. 
        This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. 
    </div> 
 
 
</div> 
</body> 
</html>

como y donde tendria que aplicar el

Código PHP:

  alto = document.getElementById('algo').offsetHeight;

gracias

salu2

zsamer · #4 (**permalink**) 08/09/2006, 14:45

algun alma caricativa?

chalchis · #5 (**permalink**) 09/09/2006, 23:59

ya sea que lo pongas asi

dentro de head

<script>
function redimensionar()
{
document.getElementById('algo').offsetHeight;
}
</script>

y en en body pon asi
<body onload='redimensionar()'>

o la otra es poner despues del cierre del body
</body>
<script>
document.getElementById('algo').offsetHeight;
</script>

porque la anterior opcion puede que marque el error ya que el div aun no se dibuja pero has las pruebas

saludos

tunait · #6 (**permalink**) 10/09/2006, 05:12

Puedes hacerlo como te sugiere chalchis pero que la función sea algo así

function redimensionar()
{
alto = document.getElementById('div1').offsetHeight;
document.getElementById('div2').style.height = alto + 'px'
}

donde div1 es el contenedor del cual quieres saber la altura y div2 el contenedor que quieres redimensionar

un saludo

zsamer · #7 (**permalink**) 10/09/2006, 10:26

ok se pasaron, muchas gracias