Сохранение фона растянуто донизу даже при фильтрации

Question

У меня есть список результатов на веб-странице, и я реализовал фильтрацию в этом списке. Для того, чтобы сохранить цвет фона DIV результатов растягивается на дно, даже если нет (или мало) результатов, я использую следующий фрагмент JavaScript:

var window_height = $(window).height(); 
var header = $('.header').height(); 
var search = $('.search').height(); 
var footer = $('.footer').height(); 
var total_height = window_height - header - search - footer; 
var div_height = $('#results-container').height(); 

if (div_height < total_height) { 
    $('#results-container').height(total_height); 
} 

Эта часть работы. Что не работает, когда я отфильтровываю результаты, и список снова увеличивается. На данный момент div_height остается высотой total_height, а мой div заканчивается раньше (и мой нижний колонтитул отображается в середине результатов). Если я прокомментирую последние три строки, div расширяется и сжимается должным образом (но заканчивается преждевременно, следовательно, необходимо что-то сделать, чтобы заставить его нижний колонтитул).

Googling предлагает, чтобы не было способа сделать это с помощью CSS, но я не уверен, что javascript действительно является ответом.

Нижний колонтитул имеет высоту набора, другие аспекты - нет.

Answer 1

statcic min-height

#results-container { 
    min-height: 200px; 
} 

динамический min-height на основе высоты окна

//assuming `header` `search` and `footer` has static height 
// and some of those 3 heights are 200px; 
#results-container { 
    min-height: calc(100% - 200px); 
}