Nov 18, 2022

# Solution 1 :

It can be done by using `Math.max()` by creating an array of heights of the elements.

Try the below code

``````function equalHeight () {
const newsBlokken =  Array.from(document.querySelectorAll('#news .bottom'));
const highest = Math.max(
...newsBlokken.map(item => item.getBoundingClientRect().height)
);
console.log(highest)
return highest
}
``````

# Solution 2 :

You can use both CSS & JavaScript

CSS solution: use flexbox attributes.
According to W3 Documentation, you can have the same height of one element, in this case `.bottom` to fit their height.

``.bottom{align-items: stretch; display: flex;}``
``````<div class="bottom">
<button type="button" style="min-height: 30px;">Try</button>
<button type="button" style="min-height: 50px;">Flexbox</button>
</div>``````

JavaScript solution.
In this case you should check every `.bottom` elements height to set it too on others elements.

``````let buttons = document.querySelectorAll('.bottom');
let maxHeight = 0;

for (let i = 0; i < buttons.length; i++) {
if (buttons[i].offsetHeight > maxHeight) {
maxHeight = buttons[i].offsetHeight;
}
}

for (let i = 0; i < buttons.length; i++) {
buttons[i].style = "height: " + maxHeight + "px";
}``````
``````<div class="main">
<button class="bottom" style="height: 30px">Try</button>
<button class="bottom" style="height: 20px">JavaScript</button>
<button class="bottom" style="height: 50px">Here</button>
</div>``````

# Solution 3 :

Hope it works for you !!!

``````jQuery(document).ready(function() {
equalheight('.box');
});

jQuery(window).resize(function() {
equalheight('.box');
});

equalheight = function(container) {
var currentTallest = 0
, currentRowStart = 0
, rowDivs = new Array()
, \$el
, topPosition = 0;
jQuery(container).each(function(\$) {
\$el = jQuery(this);
jQuery(\$el).height('auto')
topPostion = \$el.offset().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0;
currentRowStart = topPostion;
currentTallest = \$el.height();
rowDivs.push(\$el);
} else {
rowDivs.push(\$el);
currentTallest = (currentTallest < \$el.height()) ? (\$el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}``````
``````* {box-sizing: border-box;}
.box-container {display: flex; flex-wrap: wrap; max-width: 800px; }
.box h2 {margin: 0;}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">
<h2>Lorem Ipsum is simply</h2>
</div>
<div class="box">
<h2>Lorem Ipsum is simply dummy text of the printing</h2>
</div>
<div class="box">
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
</div>
</div>``````

# Problem :

I am trying to get the highest element from a group with the class .bottom and set them all to have a height of that value.

My code I have now:

``````   equalHeight(){
const newsBlokken = document.querySelectorAll('#news .bottom');
let highest = 0;

newsBlokken.forEach(function(item) {
console.log(item.getBoundingClientRect().height);
const itemH = item.getBoundingClientRect().height;
highest = items > highest ? itemH : highest;
});
console.log(highest);
}``````

The weird thing is that if I console log `item` I get `150` 3 times and if I log `highest` I also get `150` while one of the elements is definitely larger.

If I just console log `newsBlokken` outside of the loop and inspect the array I see that the last one has: `offsetHeight: 195` while the first two have `150`. How come it doesn’t get the `195`? `ClientHeight` also has `195` for the last element.

What am I missing?

As you can see the elements are not the same height:

HTML:

``````<section id="news" class="wrapper pb-0">
<div class="row">
<div class="container-fluid">
<div class="d-flex justify-content-lg-between justify-content-center">
<h2 class="dark pb-4">Our latest news</h2>
<a class="button d-none d-lg-inline-flex" href="#">
<span>View more</span>
<span class="icon-arrow-right"></span>
</a>
</div>
</div>
</div>
<div class="col-12 news-content">
<div class="container-fluid">
<div class="swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" style="margin-top: -242px;">
<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active" style="width: 443.333px; margin-right: 25px;">
<a class="" href="">
<div class="news">
<img src="img.jpg" alt="alt">
<div class="bottom">
<h3>Title</h3>
<span class="icon-arrow-right"></span>
</div>
</div>
</a>
</div>
<div class="swiper-slide swiper-slide-next" style="width: 443.333px; margin-right: 25px;">
<a class="" href="">
<div class="news">
<img src="img.jpg" alt="alt">
<div class="bottom">
<h3>Title</h3>
<span class="icon-arrow-right"></span>
</div>
</div>
</a>
</div>
<div class="swiper-slide" style="width: 443.333px; margin-right: 25px;">
<a class="" href="">
<div class="news">
<img src="img.jpg" alt="alt">
<div class="bottom">
<h3>Title</h3>
<span class="icon-arrow-right"></span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
``````

Does

You reuse

This gives

### Comment posted by Siddiqui Affan

Try with these const newsBlokken = Array.from(document.querySelectorAll(‘#news .bottom’));

### Comment posted by twan

for some reason I still keep getting 150. But 150 is the smallest element, the heighest is 195.

### Comment posted by Siddiqui Affan

Can you share the html code?

### Comment posted by twan

Yeah I added the HTML to my question

### Comment posted by twan

Thanks, I wanted to try it first with CSS but for some reason I couldn’t get it working. The elements are inside a swiper slider, maybe that has something to do with it.

### Comment posted by twan

Nevermind I fixed it with css… Instead of

### Comment posted by Frash

@twan check again, I’ve edited this just right now