让一个 div 将其高度调整为绝对定位的孩子答案

【问题标题】：Make a div adjust its height to its absolutely positioned children让一个 div 将其高度调整为绝对定位的孩子
【发布时间】：2017-07-03 00:26:55
【问题描述】：

我有一个 div 元素（默认定位），其中包含 h1 和一个链接，它们都具有绝对定位。自然地， div 元素的高度会崩溃。如何让 div 元素将其高度调整为它的两个子元素？我已经尝试过标准的 clearfixes，将溢出设置为自动并将 div 的位置设置为相对（这是我发现的另一篇文章的建议），但它们都没有奏效。

我创建了一个jsfiddle 来说明我的问题。

HTML 代码：

<div>
  <h1>the div doesnt go around this element</h1>
</div>

CSS 代码：

div {border: 2px solid;}
h1 {position: absolute;}

【问题讨论】：

你能显示一些代码吗？
好像有一个javascript答案here
这是预期的行为。为什么你需要 h1 绝对在 position:absolute ？ :) .... 也许你需要绝对位置的 div 而不是它的孩子

标签： html css clearfix

【解决方案1】：

在 css 中为 div 使用 min-width 使其覆盖孩子所需的高度。

【讨论】：

现在你只是假设这些高度是不变的。
他们是。但在这种情况下，可以假设它是常数，因为那里只有 2 个元素。

【解决方案2】：

我制作了一个 jsfiddle，帮助您使用 jquery 解决这个问题： https://jsfiddle.net/9hubfbxt/

html代码：

<div id="parent">
  <div id="child1" class="child">

  </div>
  <div id="child2" class="child">

  </div>
</div>

jquery：

var height = 0;
$("#parent .child").each(function() {
    height = height + $(this).outerHeight(true);
});

$("#parent").height(height);

现在高度可以是任何东西，取决于里面的任何东西。

编辑：我用我的 jquery 解决方法编辑了你的 jsfiddle：https://jsfiddle.net/4yuco4cL/1/

【讨论】：

我的目标是仅使用 css 来解决它，但如果我找不到任何东西，我可能会使用您的 jquery 代码。
知道了，但是您唯一的解决方案是使元素相对，正如您所说的那样，您不想这样做..或者您必须知道内部元素的高度并设置这些heights 合并为父级的高度。