Простой, но в тоже время эффективный способ делать одинаковую высоту столбцов, при этом менять значения при масштабировании.

Здравствуйте, в этот раз мы попытаемся разобраться в самом простом, но довольно частом вопросе "одинаковая высота div" или "как сделать одинаковую высоту блоков" усложнив его еще дополнительной задачей, чтобы при уменьшении масштаба в браузере, сайт автоматически бы занимал 100% высоту (min-height:100% при этом не работает) - иными словами, при уже загруженном сайте пользователь меняет масштаб в браузере и сайт тут же растягивается по высоте без дополнительного обновления страницы. Соглашусь, что такая задача достаточно редка и по сути ее вообще можно не реализовывать, т.к. редко кто будет такое делать (контент же не спрячется, а растянется по всей высоте итак, какая разница то), но эстетически все же будет красиво. 

Итак, для реализации последнего есть такое событие jquery как resize, оно вызывает функцию handler(eventObject) при изменении размера окна браузера. Так же мы воспользуемся методом height, чтобы подсчитывать высоту блока и окна браузера. Решение простое на словах: у нас есть div внутри которого еще 2 div'a (скажем sidebar и wrapper), нам необходимо, чтобы они были всегда одного размера в пикселях (причем с отступами внизу) и при этом занимали всегда всю высоту окна (при этом мы вычтем высоту "подвала" и "шапки" сайта, они же фиксированные у нас). 

Код: 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;

Мы создали переменные, где подсчитали высоты окна браузера и высоты необходимых нам div'oв ("шапка" сайта, сайдбар, главный див. Теперь переберем все возможные условия, чтобы высоты были равные. Возможно дикость, но работает.  

код 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"}); 
}

 Ну и теперь все это оборачиваем в единую функцию и обрабатываем в resize();

Итоговый код 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();
 });
});

Фух, ну как то так. Это рабочий код, который я применял в одном проекте. Изучайте jquery и всего доброго.