CSS - 相对定位父div不伸展到绝对子div高度 [英] CSS - relative positioned parent div not stretching to absolute child div height

问题描述

我已经在一天之内搜索了这个网址，似乎无法正常工作：

I've been googling this all morning and can't seem to get it to work:

我有一个父DIV和相对定位， DIV设置里面，两个定位Absolute。
我需要父DIV的高度来扩展内部DIV的内容。

I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute. I need the parent DIV's height to stretch with the content of the inner DIV's.

我试图把.clearfix类型位放在关闭标签之前＃内容，但我不浮动任何东西。我也试过添加一个float属性到#content div无效。任何人都可以在这里指向正确的方向。显然，我错过了嵌套显示如何互相影响的事情。

I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.

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

推荐答案

力的黑暗面是许多能力的途径一些人认为是不自然的。

Dark side of the force is a pathway to many abilities some consider to be unnatural.

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

这篇关于CSS - 相对定位父div不伸展到绝对子div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！