CODEWITHSUNDEEP
jquerycssresize
Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

change height depending on other div on window resize

I have two 50% width div's next to each other. One of the two has more text in it and makes the div longer then the other one. I have a javascript that makes the other div the same height even though it has less text. That works great, even when I resize the window to a smaller window (tablet size) both div's change in height but stay the same. But the problem is when I change the window back to the normal size; the div heights stay the same height as happened after the resize but don't change back to the state they were before the window resize.

This is the JS that changes height on window resize:

$(document).ready(function() {
function block() {
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
}
$(block);
$(window).resize(block);
});

example:
http://jsfiddle.net/hg0L01ex/

Upvotes: 1

Views: 972

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382150

Added by Erwin van Ekeren:
The (best) solution for my problem is working without JS but with CSS table-cells: http://jsfiddle.net/2uogqxyt

Don't use JavaScript for that but CSS. Either the FlexBox model or table-cells;

Here it is with table-cell :

.blocks { display:table-row;}
.leftblock          { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#e14f47; }
.rightblock         { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#cd2c24; }

Demonstration with table-cell

.blocks { display:flex; width:100%; align-items:stretch;}
.leftblock          { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#e14f47; }
.rightblock         { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#cd2c24; }

Demonstration with flexbox

Upvotes: 1

Related Questions