There is a function that aligns the height of the blocks with different contents:

var myHeight = function() { var mh = 0; $(".block").each(function () { var h_block = parseInt($(this).height()); if(h_block > mh) { mh = h_block; }; }); $(".block").height(mh); }

I call it to load the page and to change the size of the screen.

On $ (window) .load everything works correctly.

But with $ (window) .resize there are problems: the height of the blocks does not adjust to the amount of content, as a result, when the screen is reduced, the content starts to creep out from below for some blocks.

Why it happens? How to fix it?

  • And why should the height of the blocks be adjusted to the content volume? There is no such thing in your function. - Maxim Zasorin
  • @MaximZasorin, by default. If the block is not given a height, it automatically adjusts to the content - humster_spb
  • But in your case, the height is set using the function. - Maxim Zasorin
  • @MaximZasorin, yes, but it is obtained by comparing the heights of all the blocks, which, in turn, are formed by the content - otherwise how does the function know the heights of the blocks? - humster_spb

1 answer 1

Such an explanation. When a page is loaded for all blocks, the height value is auto , and the block height is calculated based on the content, and the .height() method returns this automatically calculated height. After your function completes, all blocks will have a fixed height, and further on the resize event, the .height() method will return it, and your function will not affect the blocks in any way.

You can try to reset the fixed height of the blocks before the next search for the maximum height, through:

 $(".block").height('auto');

In your case like this:

 var myHeight = function() { var mh = 0; $(".block").height('auto'); $(".block").each(function () { var h_block = parseInt($(this).height()); if(h_block > mh) { mh = h_block; }; }); $(".block").height(mh); }
  • I understood, yes, thank you very much! - humster_spb