如何阻止绝对定位的元素的父母崩溃
我怎样才能阻止绝对定位的元素的父母崩溃？
在下面的代码中，外部div的高度为0：
<div id="outer" style="position: relative;">
<div id="inner" style="position: absolute; height: 100px;">
<p>This is the inner content.</p>
</div>
</div>
这与这个问题非常相似，你如何保持浮动元素的父母不会崩溃？这涉及浮动元素，但是我尝试了一些解决方案（包括spacer和clearfix类），并且它们不起作用。
谢谢！
你不能：一旦孩子处于绝对位置，它几乎在父母的外面（在外表上）。
你可以做什么，如果你已经包含了jquery，就使用这个不雅的黑客：
$(".absolutepos").each(function() {
$(this).parent().css("height",$(this).height());
});
并在将div放在绝对位置时添加“absolutepos”类：
<div id="outer" style="position: relative;">
<div id="inner absolutepos" style="position: absolute; height: 100px;">
<p>This is the inner content.</p>
</div>
</div>
你可以：通过我称之为“ 双重父母 ”的东西：
在一个类似的挑战中，我最终定义了一个外部相对对象（父类化浮点数）和一个绝对定义的与相对父对象相同尺寸的方框，从共享（相对）父对象的0,0开始：相同的副本允许在其中放置对象的好处是能够忽略浮动的外部限制（我需要它将对象放在页面的中心，而不管动态浮动的宽度如何）。
“双重父母”压制了两个问题：
我做了一个小提琴（包含文档），演示了如何在保持居中盒子的同时压扁和挤压。 基本思想在下面的代码中概述：
html （注意：div的顺序（left-center-right，center-right-left，...）是无关紧要的。）
<header>
<div class="header-left">left</div>
<div class="header-center">
<div class="centerinner">middle</div>
</div>
<div class="header-right">right</div>
</header>
CSS
header {
position:relative; /* shrinkwrap to contained floats */
/* display: block /* no need to state this here */
width: 100%;
margin:0;
padding:0;
vertical-align: top;
/* background-color: papayawhip; /* Debug */
}
.header-left { /* top left of header. header adapts to height */
float:left;
display:block;
/* width and padding as desired */
}
.header-center { /* absolute reference for container box */
position:absolute;
left: 0;
width: 100%;
height:100%;
/* background-color: gainsboro; /* Debug */
}
.centerinner { /* centered within absolute reference */
margin-left:45%;
margin-right:45%;
padding-left: 1ex;
padding-right: 1ex;
background-color: #D6A9C9;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height:100%;
}
.header-right {
float:right;
text-align: right;
padding-left: 1ex;
color: forestgreen;
/* background-color: #D6F2C3; /* Debug */
}
上一篇: How to stop parents of absolutely positioned elements from collapsing