Question

我整个上午一直在谷歌上搜索，似乎无法让它发挥作用：

我有一个具有相对定位的父DIV和一个内部的两列子DIV设置，两者都定位为Absolute。我需要父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 -->

Answer 1

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

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

Answer 2

清算工作，但我有奇怪的结果。然后我发现了一个帖子，使所有浏览器都更容易和完美。

将您的孩子div设置为float：left / right。然后在父级上加上“overflow：hidden”。因为您没有指定高度，所以它将完美地包裹到子元素。我现在还没有使用清理。

Answer 3

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

相反，尝试浮动它们然后有一个明确的div：两个;在他们之后。

Answer 4

我刚刚在这方面苦苦挣扎了一段时间，发现一个真正的解决方案CSS只是将'绝对'div的定位改为'relative'。这真的有效!!!

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

希望这会帮助别人。

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

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

5 个答案: