调整父级div以适应子级div的大小

Question

这可能需要一些技巧才能在不使用JavaScript的情况下实现...

如果我有以下内容（为了问题而剥离了代码）：

<div id="container">
    <div id="content"></div>
</div>

#container {
    position: relative;
}

#content {
    position: absolute;
}

内容框包含动态内容，因此无法使用固定高度。

由于它使用了jQuery UI的东西，必须在内容div上使用绝对定位...

如何使容器框调整其高度以适应内容？

我知道这可能不可能没有使用某种JavaScript，因为放置一个绝对定位的div会使它脱离流程等等，但只是想知道是否有人知道某种解决方法？

谢谢！

- Ryano

---

你尝试设置容器的最小宽度和最小高度属性了吗？ - Taha Paksu

JavaScript 有什么可怕的？ - Luke

首先，使用position:absolute的原因是什么？ - Niet the Dark Absol

你能详细解释一下为什么“使用jQuery UI的东西”意味着你必须使用position:absolute吗？而且如果你已经在使用jQuery，那么你知道你已经在使用JavaScript了，对吧？ - Mr Lister

我并不害怕使用JavaScript，只是被要求不要使用，因为应用程序本身已经非常依赖JavaScript了！ - Ryano

Answer 1

编辑：我第一次误解了问题。

如果其他方法都失败了，这里有一个jQuery解决方案：

$('#container').css('height',$('#content').height());

- user110857

Answer 2

好的，我不知道你的内容是什么（jQuery UI 的东西）。不过，假设它只是一张图片：

#container {
    position: relative;
}

#content {
    position: absolute;
    top:0; bottom:0; left:0; right:0;
}

这将把您的内容区域设置为父元素宽度和高度至少为100%。

- Armeen Moon

---

否则，jQuery 是您最好的选择。您还可以研究 CSS3 的 background-size。 - Armeen Moon

请理解，您刚刚提出的建议与 OP 所试图实现的完全相反：OP 正在寻找一种（希望是非 JS 的）自动调整父元素大小以适应其子元素的方法。然而，我正在寻找特定的 jQuery 方法来实现这一点，因为我必须在已经确定长度和宽度的 jQuery 函数中工作，但我移动了一些东西，需要根据内容子元素重新计算尺寸。 - user253780

请理解，这个回答是来自2012年的...你为什么这么生气？不要告诉我你的“jQuery函数”问题。 - Armeen Moon