I have 2 div elements.
The first div is larger and has the position:relative property.
The second div contains a set of boxes inside the first div and has the position:absolute property.
As I resize the window to make it responsive, the height of the second div grows and overflows the first div.
To ensure that the height of the first div remains larger than the second one, I am using jQuery. It loops through the children of the first div and sets the biggestHeight accordingly.
However, the height of the first div does not increase dynamically when I resize the window. I need to refresh the page to see the effect.
I would like the height of the first div to increase dynamically as I resize the window until $(window).width() >= 576px.
I am considering if something like $(window).resize() could help in this case.
jQuery:
$(document).ready(function(){
var biggestHeight = "0";
// Loop through elements children to find & set the biggest height
$(".thumbnail-portfolio *").each(function(){
// If this element's height is bigger than the biggestHeight
if ($(this).height() > biggestHeight) {
// Set the biggestHeight to this Height
biggestHeight = $(this).height();
} });
// Set the portfolio container height.
$(".thumbnail-portfolio").height(biggestHeight+200);
$(".img-size-portfolio").height(biggestHeight+200);
});
Here is the complete code: [1]: https://codepen.io/darthvadercodes/pen/erdGZM
Update 1:
Thanks to @deebs answer, the problem has been solved. I have updated the codepen code with the solution I was looking for.
Thank you everyone for your time.
Solution: