jquery，列的高度相等，并且至少与浏览器窗口一样高

jquery, columns equal heights and at least as tall as the browser window

本文关键字：窗口 浏览器 一样 高度 jquery      更新时间：2023-10-12

我使用下面的jquery来使页面上的两个主列具有相同的高度。

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

这很好，除非其中一个div的内容不够大，无法延伸到页面底部，那么两列的高度相同，但页面底部有一个难看的间隙。我希望列的高度相同，但也至少与用于显示页面的浏览器窗口一样高。

有什么想法吗？

没有测试，但应该可以：

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

解释如下：$（window）.height（）是客户端屏幕的高度（如果您想要更小，请检查父屏幕的高度。

wS>$（this）.height（）？wS:$（this）.height（）//，它将至少选择屏幕的高度（此表达式是if（…）{…}else{…｝

的缩写

为什么不为两个div添加一个容器，将它们设置为具有父级的全高，并让它们生长。

相关文章：