CSS - 相对定位的父 div 不拉伸到绝对子 div 高度

Question

我整个早上都在谷歌上搜索，似乎无法让它工作：

我有一个具有相对定位的父 DIV 和一个在其中设置的两列子 DIV，两者都定位为绝对。 我需要父 DIV 的高度与内部 DIV 的内容一起拉伸。

我尝试在#content 的结束标记之前放置一个 .clearfix 类型位，但我没有浮动任何内容。我还尝试向 #content div 添加一个 float 属性，但无济于事。谁能在这里指出我正确的方向。显然，我错过了嵌套显示如何相互影响的内容。

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 -->

Answer 1

原力的阴暗面是通往许多被某些人认为不自然的能力的途径。

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

Answer 2

我刚刚为此苦苦挣扎了一段时间，并找到了一个真正的解决方案——仅 CSS 就是将“绝对”div 的定位更改为“相对”。这真的有效！！！

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

希望这对其他人有帮助。

Answer 3

清理工作，但我得到了奇怪的结果。然后我发现了一个帖子，它使它在所有浏览器中变得更加容易和完美。

将您的子 div 设置为浮动：左/右。然后将“溢出：隐藏”放在父级上。因为您没有指定高度，它只会完美地包裹到子元素。我已经很久没有使用'd clearing了。

Answer 4

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

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

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;
}