2

Tengo dos elementos HTML en mi Web: un aside y un div, ambos con borde, uno al lado de otro y quiero saber la dimensión para en función de ello ajustar el tamaño para que no se vea uno más pequeño que otro. Les agradecería mucho su ayuda. Gracias.

Agregado posteriormente: Este sería el efecto visual que no deseo

Quiero que ambos tengan la misma altura, para ello debo conocer la altura de ambos, pues varía en mi Web según el contenido, y en función de ello, tomar la mayor y aplicársela a ambos. Pero no sé como obtener esa altura.

El código sería este:

<style>
    div{
        border: 1px solid black;
    }
    div#PanelIzquierda{
        float: left;
        width: 30%;
    }
    div#PanelDerecha{
        float: left;
        width: 50%;
    }
</style>

<body onLoad="ajustarTamaño()">
    <div id="PanelIzquierda">
        <h2>Contenido</h2>
    </div>

    <div id="PanelDerecha">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut eros id augue pharetra ullamcorper. Mauris consectetur, magna ut vehicula porta, elit quam bibendum nulla, a dapibus tellus risus in dui. Phasellus lobortis risus ut est vestibulum, non molestie nibh dapibus. Aliquam bibendum tincidunt mi nec molestie. In hac habitasse platea dictumst. Suspendisse varius laoreet urna, hendrerit ultricies dolor interdum sed. Sed in neque eu urna consectetur vehicula eu non metus. Donec laoreet leo neque, ut dignissim diam feugiat id. Vestibulum vel nisl et lectus iaculis ultrices et sit amet felis. Quisque a urna maximus, efficitur magna sit amet, condimentum urna. Mauris vitae urna vestibulum, dignissim tortor ut, finibus ante.</p>
    </div>
</body>

Disculpen mi ignorancia, soy novato en esto. Muchas gracias

7
  • 1
    el como depende de como este el css de los elementos a modificar. Por favor, muestranos que tienes para saber como seguir. Salu2 Commented el 26 dic. 2016 a las 21:24
  • Deberías de agregar el CSS que tienes actualmente para dichos elementos. Commented el 26 dic. 2016 a las 21:34
  • He agregado más info, Gracias.
    – Daniel
    Commented el 26 dic. 2016 a las 21:52
  • @los datos que quieres puedes obtener en herramientas de desarrollador, en inspeccionar
    – hubman
    Commented el 26 dic. 2016 a las 21:58
  • pero no es lo que quiero
    – Daniel
    Commented el 26 dic. 2016 a las 21:58

1 respuesta 1

6

Podrías usar el valor clientWidth y clientHeight para obtener su anchura y altura correspondientes.

function ajustarTamaño(){
  var panelIzquierda = document.getElementById("PanelIzquierda");
  var panelDerecha = document.getElementById("PanelDerecha");
  
  console.log(panelIzquierda.clientWidth);
  console.log(panelIzquierda.clientHeight);
  
  console.log(panelDerecha.clientWidth);
  console.log(panelDerecha.clientHeight);
}
    div{
        border: 1px solid black;
    }
    div#PanelIzquierda{
        float: left;
        width: 30%;
    }
    div#PanelDerecha{
        float: left;
        width: 50%;
    }
<body onLoad="ajustarTamaño()">
    <div id="PanelIzquierda">
        <h2>Contenido</h2>
    </div>

    <div id="PanelDerecha">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut eros id augue pharetra ullamcorper. Mauris consectetur, magna ut vehicula porta, elit quam bibendum nulla, a dapibus tellus risus in dui. Phasellus lobortis risus ut est vestibulum, non molestie nibh dapibus. Aliquam bibendum tincidunt mi nec molestie. In hac habitasse platea dictumst. Suspendisse varius laoreet urna, hendrerit ultricies dolor interdum sed. Sed in neque eu urna consectetur vehicula eu non metus. Donec laoreet leo neque, ut dignissim diam feugiat id. Vestibulum vel nisl et lectus iaculis ultrices et sit amet felis. Quisque a urna maximus, efficitur magna sit amet, condimentum urna. Mauris vitae urna vestibulum, dignissim tortor ut, finibus ante.</p>
    </div>
</body>

5
  • 2
    Muchísimas gracias, había probado de otras formas, como
    – Daniel
    Commented el 26 dic. 2016 a las 22:04
  • document.getElementById("PanelIzquierda").style.height
    – Daniel
    Commented el 26 dic. 2016 a las 22:05
  • document.getElementById("PanelIzquierda").offsetHeight()
    – Daniel
    Commented el 26 dic. 2016 a las 22:05
  • 1
    Y no funcionaba, muchas gracias y Feliz Navidad ya que estamos, jaja.
    – Daniel
    Commented el 26 dic. 2016 a las 22:09
  • @Daniel Igualmente, es un placer :) style.height sería cuando has añadido la altura inline. Por el contrario, clientHeight devuelve la altura del elemento con el padding. El offsetHeight incluye todo, también los bordes. Commented el 26 dic. 2016 a las 22:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.