obtener la altura de un div y establecer la altura de otro div usándolo

Tengo dos divs, ninguno tiene una altura establecida en css, ya que quiero tomar cualquier altura en la que terminen y configurar el otro div para que tenga esa altura.

El javascript que tengo es este

function fixHeight() {
    var divh = document.getElementById('prCol1').height;
    document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
    document.getElementById('prCol2').style.height = divh + 'px';
}

Tengo la siguiente línea de código solo para ver si obtengo algún tipo de respuesta real.

document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';

Tengo un conjunto onload para ejecutar la función.

mis dos divs se ven así

<div id="prCol1">
     ..content..
</div>
<div id="prCol2" class="slideshow">
    ..content..
</div>

preguntado el 12 de junio de 12 a las 21:06

5 Respuestas

Utiliza offsetHeight - http://jsfiddle.net/HwATE/

function fixHeight() {
    var divh = document.getElementById('prCol1').offsetHeight; /* change this */
    document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
    document.getElementById('prCol2').style.height = divh + 'px';
}

Respondido el 12 de junio de 12 a las 21:06

No creo que offsetHeight sea totalmente compatible con todos los navegadores. No he investigado en profundidad si jQuery soluciona los problemas, pero ese es el punto, ¿verdad? vadikom.com/dailies/… - Juan Culviner

@JohnCulviner Sí, podría causar un 1px diferencia, pero en el caso del OP no es realmente relevante, creo. Su objetivo es hacer los 2 <div>-s igualmente alto y exactamente eso sucederá. Creo que esa es la posibilidad (incluso podría no suceder) de 1px la diferencia en IE9 es una buena compensación por no incluir una biblioteca de 40K (si aún no está incluida). Y JS sin procesar siempre es más rápido ... Y offsetHeight es compatible con todos los navegadores - quirksmode.org/dom/w3c_cssom.html - Zoltán Toth

Puede usar jQuery para obtener la altura y configurarla.

var h = $("#prCol1").height();
$("#prCol2").height(h);

Respondido el 12 de junio de 12 a las 21:06

Hay complementos de jQuery para hacer esto de manera general. Aquí hay uno.

Respondido el 12 de junio de 12 a las 21:06

Recomendaría usar jQuery aquí. No puede obtener la altura de un elemento como lo está intentando en ningún navegador que conozca. Aquí está el código si usa jQuery, que es muy sencillo. No intentaría hacer esto sin jQuery porque los navegadores pueden ser diferentes con respecto a cómo accede a la altura.

function fixHeight() {
    var $prCol1 = $('#prCol1');
    var divh = $prCol1.height();
    $prCol1.html('<ul><li>' + divh + '</li></ul>');
    $('#prCol1').height(divh);
}

Respondido el 12 de junio de 12 a las 21:06

Eche un vistazo rápido a mi jsfiddle, señor ;-) - Zoltán Toth

puedes obtener la altura con este código:

document.getElementById('YourElementID').clientHeight;

Respondido el 08 de Septiembre de 20 a las 06:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.