jQuery, столбцы равные высоты и, по крайней мере, такие же высокие, как окно браузера

Question

Я использую следующий бит jquery, чтобы сделать два основных столбца на моей странице одинаковой высоты.

var $toEqualize = $('.equalheightbox'); 
$toEqualize.css('height', (function(){ 
    return Math.max.apply(null, $toEqualize.map(function(){ 
     return $(this).height(); 
    }).get()); 
})()); 

Который прекрасно работает за исключением, если содержание либо DIV не достаточно большой, чтобы растянуть до нижней части страницы, то две колонки имеют одинаковую высоту, но есть неприглядный разрыв в нижней части моей страницы. Я хотел бы, чтобы столбцы имели одинаковую высоту, но также были, по крайней мере, такими же высокими, как и окно браузера, используемое для показа страницы.

У вас есть идеи?

Answer 1

Не тестировался, но это должно сделать это:

var $toEqualize = $('.equalheightbox'); 
var wS = $(window).height(); 
$toEqualize.css('height', (function(){ 
    return Math.max.apply(null, $toEqualize.map(function(){ 
     return wS > $(this).height() ? wS : $(this).height(); 
    }).get()); 
})()); 

Для explainations: $ (окно) .height() высота экрана клиента (если вы хотите меньше, проверьте высоту от родителя.

wS> $ (this) .height()? wS: $ (this) .height() // который будет выбирать по крайней мере высоту экрана (это выражение является сокращением для if (...) {...} else {...}

Answer 2

Почему бы вам не добавить контейнер для обоих div, чтобы они имели полную высоту родителя и позволяли им расти.