Simple, but at the same time efficient way to do the same height of columns div changing the values at zooming.

Hi, this time we will try to analyze the very simple but quite often asked question "the same height of div" or "how to do the same height of blocks" complicating it with additional task when zoom out in your browser, the site will automatically have 100% height (min-height: 100% not working in this case) - in other words, when the site was loaded and the user changes the zoom in the browser, the site immediately stretched height without additional updates o the page. I agree that such a task is quite rare and in fact it may not be implemented, since hardly anyone would do this (the content won’t hide but stretches on the entire height so what’s the difference) but from the esthetical point of view it will be more beautiful.

So, for its implementation there is a jquery as resize as resize, it causes the handler function (eventObject) when the browser window size changes. We also use the method of height to calculate the height of the block and the browser window. The solution is simple at words: we have a div inside of which there are 2 more divs (let’s say sidebar and wrapper), we need them always be the same size in pixels (and indented below) and thus always held the entire height of the window (with this we subtract the height of the "basement" and the "top" of the site, because they are fixed).

Code: 
var h = $(window).height(); 
 var htp = $("#top").height();
 var hbt = $("#wrapper").height();
 var hsb = $("#sidebar").height();
var h_summ = htp+hbt; 
 var h_minus = h-htp;
 var h_minus_hbt = h-htp-hbt;

We have created a variable, where we calculated the heights of the browser window and the height of the divs we need ("top" of a site, the sidebar, the main div. Now let’s concider all possible conditions, to make the height equal. Sounds strange, but it works.

 code  
if (h_summ >= h) {
 $("#wrapper").css("min-height", hsb + "px");
 }
 if (hsb >= h) { 
 $("#wrapper").css("min-height", hsb + "px");
 }
 if (hsb > h_minus ) {
 $("#wrapper").css({"min-height":hsb+"px"}); 
 }
 if (hsb > h_minus_hbt ) {
 $("#main_containt").css({"min-height":hsb+"px"}); 
 }
else {
 $("#wrapper").css({"min-height":h-htp-hbt+"px"}); 
}

And let’s make a single function and process it to resize();

Final code 
function handleResize() {
 
 var h = $(window).height(); 
 var htp = $("#top").height();
 var hbt = $("#wrapper").height();
 var hsb = $("#sidebar").height();
 
 var h_summ = htp+hbt; 
 var h_minus = h-htp;
 var h_minus_hbt = h-htp-hbt;
 
 if (h_summ >= h) {
 $("#wrapper").css("min-height", hsb + "px");
 }
 if (hsb >= h) { 
 $("#wrapper").css("min-height", hsb + "px");
 }
 if (hsb > h_minus ) {
 $("#wrapper").css({"min-height":hsb+"px"}); 
 }
 if (hsb > h_minus_hbt ) {
 $("#wrapper").css({"min-height":hsb+"px"}); 
 }
 else {
 $("#wrapper").css({"min-height":h-htp-hbt+"px"});  
 }
}
$(function(){
 handleResize();
 $(window).resize(function(){
 handleResize();
 });
});

Phew, well, something like this. This is a working code that I used in one project. Learn jquery and best regards.