CSS - 相对定位的父级 div 无法延伸到绝对定位的子级 div 的高度

Question

整个早上我都在搜索这个问题，但似乎无法解决:

我有一个父级DIV相对定位，内部设置了两列子DIV，均为绝对定位。我需要父级DIV的高度随着内部DIV的内容而拉伸。

我尝试在#content的结束标记前加入.clearfix类型的代码，但没有浮动任何元素。我还尝试将float属性添加到#content div，但没有成功。有人能指点我正确的方向吗？很明显，我没有理解嵌套显示如何影响彼此。

CSS：

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol {
    width: 500px;
    position: absolute;
}

#rightcol {
    width: 270px;
    position: absolute;
    left: 500px;
    margin-left: 10px;
    text-align: center;
}

HTML：

<div id="content">
    <div id="leftcol">
        <p>Lorem Ipsum</p>
    </div><!-- /leftcol -->
    <div id="rightcol">
        <img src="images/thumb1.jpg">
        <img src="images/thumb2.jpg">
    </div><!-- /rightcol -->
    <br style="clear:both;">
</div><!-- /content -->

- user1054093

Answer 1

黑暗面的力量是通往许多人认为不自然的能力之路。

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});​

- tuze

---

我的天啊，太棒了！！ - krekto

Answer 2

清除浮动确实有效，但我遇到了一些奇怪的结果。后来我找到了一篇帖子，使得它在所有浏览器中更加容易和完美。

将您的子div设置为float:left/right。然后在父元素上放置“overflow:hidden”。因为您没有指定高度，所以它将完美地适应子元素。我现在已经很久没有使用清除浮动了。

- Lee

---

这不会使得父级 div 的高度随着绝对定位的子元素而增加！ - Nielsm

@Nielsm 我知道，所以我说“将你的子div设为浮动”（而不是绝对定位）。 以后试着在评论之前阅读完整个答案，这样可以避免让你看起来很傻。 - Lee

抱歉，我的评论打错了。实际上我用float:left替换了position:absolute。但在我的情况下这并没有起到作用。 - Nielsm

@Nielsm 尝试将 width:100% 添加到父 div 中（假设父元素应该是 100% 宽度）。我认为它只有在浏览器能够检测到父元素尺寸时才有效。不过这是一个三年前的答案，而我已经很久没有做前端开发工作了。也许可以尝试创建一个新问题或至少一个 jsfiddle 来展示你的问题，因为这确实有效（我有几个完成的网站来证明），但是像所有修复一样，它需要正确应用，并不适用于所有情况。 - Lee

@Lee，从你的回答中并不清楚你需要使用float:left而不是position:absolute。你应该进行编辑。 - WoodrowShigeru

Answer 3

当您的列div具有绝对位置时，它们不会影响其包含的div，因为它们从正常的页面流中删除。

相反，尝试将它们浮动，然后在它们之后加一个带有clear:both;的div。

- Helen

---

那么，让父级 div 始终在内容下方延伸的最佳方法是分别向左和向右浮动每个列吗？ - user1054093

你可以将它们都向左浮动，或者都向右浮动，或者分别向两边浮动。如果你在它们下面（仍然在父级div内）有一个clear:both;的div，那么你的父级div将会延伸到两列的底部。 - Helen

Answer 4

我刚刚遇到了这个问题并找到了一个真正的解决方案：仅使用CSS将“absolute” div的定位更改为“relative”。这确实有效！

在Mac上测试过，使用Safari 5.1.5和Chrome 21.0....

希望这能帮助其他人。

- Visitor

---

如果需要绝对定位的 div，则此解决方案无法解决问题。 - Shawn Northrop

Answer 5

你不需要使用 position: absolute 来完成这个任务。

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}

- DanielB

---

这个方法可以工作，但是无法让左右两列推动父级div的高度。不过我很感谢您的回复，从中我也学到了一些东西。 - user1054093

父级div的高度应与子div的高度一起增长。 你需要像在问题的html中那样保留 clear:both 元素。 - DanielB