Resize all elements from a class with the tallest one (HTML + JavaScript)

Example: CodePen


Code:

<div class="myDivClass" style="border: 5px solid red;">
  <h1>DIV 1</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Platea dictumst quisque sagittis purus sit. Tincidunt vitae semper quis lectus. Netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at. Tempor commodo ullamcorper a lacus. Fermentum et sollicitudin ac orci. Nunc sed augue lacus viverra vitae congue eu consequat. Id neque aliquam vestibulum morbi blandit cursus risus. Eu feugiat pretium nibh ipsum consequat nisl. Sem nulla pharetra diam sit amet nisl.
  </p>
</div>

<div class="myDivClass" style="border: 5px solid blue;">
  <h1>DIV 2</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Platea dictumst quisque sagittis purus sit. Tincidunt vitae semper quis lectus. Netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at. Tempor commodo ullamcorper a lacus. Fermentum et sollicitudin ac orci. Nunc sed augue lacus viverra vitae congue eu consequat. Id neque aliquam vestibulum morbi blandit cursus risus. Eu feugiat pretium nibh ipsum consequat nisl. Sem nulla pharetra diam sit amet nisl.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Platea dictumst quisque sagittis purus sit. Tincidunt vitae semper quis lectus. Netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at. Tempor commodo ullamcorper a lacus. Fermentum et sollicitudin ac orci. Nunc sed augue lacus viverra vitae congue eu consequat. Id neque aliquam vestibulum morbi blandit cursus risus. Eu feugiat pretium nibh ipsum consequat nisl. Sem nulla pharetra diam sit amet nisl.
  </p>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var x = document.querySelectorAll(".myDivClass");
    var styles = window.getComputedStyle(x[0]);
    var maxHeight = styles.height;
    for(var i = 0; i < Object.keys(x).length; i++)
    {
      var styles = window.getComputedStyle(x[i]);
      if(parseFloat(styles.height, 10) > parseFloat(maxHeight, 10))
      {
        maxHeight = styles.height;
      }
    }
    for(var i = 0; i < Object.keys(x).length; i++)
    {
      x[i].style.height = maxHeight;
    }
  }, false);
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *