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

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

即使在过滤时也要将背景拉伸到底部

1 个答案: