フィルタリングしても背景が下に伸びている

Question

ウェブページに結果のリストがあり、そのリストにフィルタリングを実装しました。

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の背景色を保つために、私はジャバスクリプトの次のコードを使用しています、何の（または少数の）結果が存在しない場合でも、一番下まで伸ばしました。何がうまくいかないのは、結果をフィルタリング解除してリストが長くなった場合です。この時点で、div_heightはtotal_heightの高さのままであり、divは早期に終了します（結果の途中でフッタが表示されます）。最後の3行をコメントアウトすると、divは適切に展開され、縮小されます（ただし、途中で終了するため、フッターに強制するために何かをする必要があります）。

グーグルでは、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); 
}