Html CSS - 相对定位的父 div 没有延伸到绝对子 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8184919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - relative positioned parent div not stretching to absolute child div height
提问by user1054093
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.
我有一个带有相对定位的父 DIV，里面有一个两列子 DIV 设置，都定位为绝对。我需要父 DIV 的高度与内部 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.
我曾尝试在#content 的结束标记之前放置一个 .clearfix 类型位，但我没有浮动任何内容。我还尝试向 #content div 添加一个 float 属性，但无济于事。任何人都可以在这里指出我正确的方向。显然，我遗漏了嵌套显示如何相互影响。
CSS:
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:
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 -->
回答by tuze
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);
});?
回答by Lee
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.
将您的孩子 div 设置为浮动：左/右。然后将“溢出：隐藏”放在父级上。因为你没有指定高度，它只会完美地包裹到子元素。我已经很久没有使用过清除了。
回答by Helen
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
您的列 div 不会影响其包含的 div，因为它们具有绝对位置，因为它们已从正常页面流中删除。
Instead, try floating them then have a div with clear: both; after them.
相反，尝试浮动它们，然后使用 clear: both; 在他们之后。
回答by Visitor
I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!
我刚刚为此苦苦挣扎了一段时间，并找到了一个真正的解决方案，仅 CSS 是将“绝对”div 的定位更改为“相对”。这真的有效！！！
Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....
在 Mac 上测试，使用 Safari 5.1.5 和 Chrome 21.0....
Hope this will help someone else.
希望这会帮助别人。
回答by DanielB
You do not need position: absolutefor this task.
您不需要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;
}
