Question

你好！正如你在上面的jsfiddle中看到的那样，我有一个父div，它的位置是相对于具有绝对位置的子div。

<div class="d1">
  <div class="d2">W<br>o<br>r<br>l<br>d
  </div>
  <div class="d3">Hello</div>
</div>

d1具有相对位置，而d2和d3具有绝对位置。

我尝试过以下jQuery没有成功：

$('.d1').css(height,($( "d3" ).height());

（你可能会说，我不知道我在做什么。）

如果可能的话，我希望父母div拥有最高孩子的高度。如果这不起作用，那么让父母与其中一个孩子的身高相同也会起作用。

我是jQuery和javascript的新手，并尝试过一些东西，但似乎都没有。

提前致谢！

Answer 1

Auto height on parent container with Absolute/Fixed Children

可能重复

所以你的答案是：父div不能使用＆＃34; height：auto＆＃34;当它的孩子被定位为绝对/固定时。

您需要使用JavaScript来实现这一目标。

在jquery中有类似的东西。

var biggestHeight = "0";
// Loop through elements children to find & set the biggest height
$("#d1 *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$("#d1").height(biggestHeight);

工作示例 http://jsfiddle.net/blowsie/dPCky/1/

为您量身定制的示例 http://jsfiddle.net/nWb5j/68/

Answer 2

这里只需使用Math.max demo

var  d2Height = $("#d2").height(),
     d3Height = $("#d3").height(),
     largest = Math.max(d2Height, d3Height);
  $('#d1').css({"height":largest});

Answer 3

在你的情况下，这两行javascript解决了这个问题：

var height = Math.max($( "#d2" ).height(),$( "#d3" ).height());
$('#d1').height(height);

请参阅更新的小提琴：

http://jsfiddle.net/nWb5j/69/

Answer 4

你可以试试这个......

var maxHeight =0;

//get the max height of child div
$(".d1 > div").height(function(i, h){
    if (h > maxHeight ) {
        maxHeight = h;
    }
});

$(".d1").height(maxHeight);

如何根据子div的高度更改父div的高度？

4 个答案: