javascript - 即使在过滤时也保持背景拉伸(stretch)到底部

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 会正确扩展和收缩(但过早结束，因此需要做一些事情将其强制到页脚)。

谷歌搜索表明没有办法用 CSS 做到这一点，但我也不确定 javascript 是否真的是答案。

页脚有设置高度，其他方面没有。

Answer 1

静态最小高度

#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);
}