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

Posted 2023-03-06

【中文标题】如何阻止绝对定位元素的父级折叠

【英文标题】：How to stop parents of absolutely positioned elements from collapsing

【发布时间】：2012-11-14 13:02:37

【问题描述】：

？

以下代码中，外层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 类），但它们不起作用。

谢谢！

【问题讨论】：

通过在内部 DIV 上使用绝对定位，您可以将其从页面流中移除。防止外部 DIV 折叠的唯一方法是设置样式（可能使用 min-height 或 padding-top 来匹配内部 DIV 的高度）。

【参考方案1】：

你不能：一旦孩子处于绝对位置，它实际上就在父母的“外面”（在外观上）。

如果你包含了 jquery，你可以做的是使用这个不雅的 hack：

$(".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>

【参考方案2】：

你可以：通过我称之为“双重养育”的方式：

在一个类似的挑战中，我最终定义了一个外部相对对象（作为浮动对象的父对象）和一个与相对父对象具有相同尺寸的绝对定义的框，从共享（相对）父对象的 0,0 开始：一个相同的副本，其好处是允许将对象放置在其中可以忽略浮动的外部限制（我需要它将对象在页面上居中，而不管动态浮动的宽度如何。）

“双亲”解决了这两个问题：

绝对父级无法获取浮动的高度（但能够适应浮动的共同父级的高度）。 相对父级无法将对象定位到页面的中心（它只会找到浮动之间的中间位置，并防止居中的内容越过浮动对象的边界）。

我做了一个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 */