将DIV高度设置为等于另一个DIV

Question

我有两个DIV,.sidebar并且.content我想设置.sidebar为与.content保持相同的高度.

我尝试过以下方法:

$(".sidebar").css({'height':($(".content").height()+'px'});

$(".sidebar").height($(".content").height());

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

这些都不起作用.因为.content我没有任何高度,因为会根据内容增加或减少.

请帮我.我今天必须完成一个网页,这个(简单)的事情令我头疼.

谢谢!

Answer 1

你的第一个例子不起作用的原因是因为一个错字:

$(".sidebar").css({'height':($(".content").height()+'px'});

应该是

$(".sidebar").css({'height':($(".content").height()+'px')});

你在.content选择器之前缺少一个尾随括号.

Answer 2

eje211关于使用CSS设置页面样式的观点。这里有两种使用CSS的方法，一种是使用脚本实现此目的的方法：

1. 本文提出了没有CSS hack的相等的列高。

2. 这是一种使用CSS hack获得相等的列高的方法。

3. 最后，如果您确实想使用javascript / jQuery，则可以使用jQuery .map（）页面具有的均衡高度脚本作为演示。

   $.fn.equalizeHeights = function(){
     return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
   }
   

   然后按如下所示使用它：

   $('.sidebar, .content').equalizeHeights();
   

Answer 3

我认为您正在寻找的是人造柱。