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:
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.
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 -->
部队的黑暗面是通往许多被认为不自然的能力的途径。
$(document).ready(function()
{
var objHeight = 0;
$.each($('#content').children(), function(){
objHeight += $(this).height();
});
$('#content').height(objHeight);
});
clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.
Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
Instead, try floating them then have a div with clear: both; after them.
链接地址: http://www.djcxy.com/p/88460.html上一篇: 使绝对定位div扩大父div高度