0

I have three floating to the left divs, with 33.33%, each with a different content. I want to make a height of each of them to be same. I thought of setting the height of the first two divs, that are shorter to the height of the last one with javascript. So that it will response to a screen device, and on mobile and tablets will not run.

The there divs will be displayed as a price table on the website. Any suggestions of how could I achieve it?

M-K
  • 77
  • 5

2 Answers2

1

Use flexbox:

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

.parent {
    display: flex;
}
markoffden
  • 1,406
  • 1
  • 15
  • 31
0
  • Select all target elements using suitable selector.
  • Get height(.height()) of all the elements in array using .map
  • get Max height from the selected elements using Math.max
  • Set the height of all the elements using .height(NEW_HEIGHT)

$('button').on('click', function() {
  var allH = $('.target').map(function() {
    return $(this).height();
  });
  var maxH = Math.max.apply(null, allH);
  $('.target').height(maxH);
});
div {
  float: left;
  width: 33.33%;
  background-color: green;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='target'>1
  <br>
</div>
<div class='target'>2
  <br>
  <br>
  <br>
</div>
<div class='target'>3
  <br>
  <br>
  <br>
  <br>
</div>

<button>Set Max Height</button>
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • 1
    @MarcinKilarski Good luck mate... – Rayon May 01 '16 at 18:24
  • Thank you for your detailed reply. I decided to use display:flex. Despite the fact that it is not supported by IE 9 and lower. I am sure that your answer is better, but I was looking for a simple solution. Thanks again. – M-K May 01 '16 at 18:29