0

我有一个侧边栏和内容区域，每个区域都有独特的背景颜色。它们都是浮动的，所以我无法让 2 的大小相同，这样它们就可以一直蔓延到底部。我想用 jQuery 我可以确定每列的高度，然后自动调整另一列的大小，使它们具有相同的高度，但是我的脚本返回 px 中的值，所以我无法进行直接比较。

还有其他更好的方法吗，您可以建议我吗？

// Sample code:
var left_bar = $("#left_bar").css("height");
var content_area = $("#content_area").css("height");
if(left_bar > content_area) {
    $("#content_area").attr("height",left_bar);
} else {
    $("#sidebar").attr("height",content_area);
}
4

3 回答 3

1

你应该使用.height()而不是attr('height', left_bar)- 这会给你一个数字值。

var a = $('#left_bar'), b = $('#content_area');

if (a.height() > b.height()) {
 b.height(a.height()); 
} else {
 a.height(b.height()); 
}

演示：http: //jsbin.com/olopuy/1/edit

不用任何 JS 也能得到你想要的；见http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-10-24T18:53:18.850 回答
0 
var left_bar = $("#left_bar").height();
var content_area = $("#content_area").height();
if(left_bar > content_area) {
    $("#content_area").attr("height",left_bar);
} else {
    $("#sidebar").attr("height",content_area);
}

会给你一个数字而不是后面有 px 的数字。

于 2012-10-24T18:54:17.120 回答
0

这是一个解决方案，它结合了几个技巧，只需几行代码即可完成所有工作：

$c = $('#left_bar,#content_area');
$c.height( Math.max.apply( // find the max of all elements in an array
    Math, $.map($c,function(v){   // build an array of heights
        return $(v).height(); 
    })
));

甚至可以压缩成一行：

$c = $('#left_bar,#content_area');
$c.height(Math.max.apply(Math,$.map($c,function(v){return $(v).height();})));
于 2013-01-21T19:46:41.147 回答