Question

如何阻止绝对定位元素的父元素折叠？

在以下代码中，外部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>

这与此问题How do you keep parents of floated elements from collapsing?非常相似，它处理浮动元素，但我尝试了一些解决方案（包括spacer和clearfix类），但它们不起作用。

谢谢！

Answer 1

您可以：我称之为＆＃34; 双重教养＆＃34;：

在类似的挑战中，我最终定义了一个外部相对对象（将浮点数作为父项），以及一个与相对父项相同维度的绝对定义框，从共享（相对）父项的0,0开始：一个相同的副本，允许在其中放置对象，可以忽略浮动的外部限制（无论动态浮动的宽度如何，我都需要它将页面上的对象居中。）

＆＃34;双重养育＆＃34;压扁了这两个问题：

绝对父母无法获得浮动的高度（但是能够适应浮动的共同父母的高度）。
相对父母无法定位以页面为中心的对象（它只会找到浮动之间的中间位置，并保持居中内容不会跨越浮动对象的边界）。

我做了fiddle (contains documentation)演示了这个设置如何在保持居中框的同时压扁和挤压。基本思想在下面的代码中概述：

<强> HTML （在旁注：div的顺序（左中 - 右，中 - 右 - 左）是无关紧要的。）

<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 */
}

Answer 2