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

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>

这与如何防止浮动元素的父级折叠的问题非常相似，但是我尝试了一些解决方案（包括spacer和clearfix类），它们都不起作用。

谢谢！

- DatsunBing

---

在内部DIV上使用绝对定位会将其从页面流中移除。防止外部DIV崩溃的唯一方法是对其进行样式设置（例如使用min-height或padding-top来匹配内部DIV的高度）。 - joequincy

Answer 1

您无法在绝对定位后，将子元素放回父元素内（在外观上）。

如果您使用了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>

- CAP

Answer 2

你可以通过我称之为“双重父级关系”的方法来解决类似的问题：

在一个类似的挑战中，我定义了一个外部相对对象（浮动元素的父级），和一个与相对父级具有相同尺寸的绝对定位盒子，从共享的（相对）父级的0,0开始：这是一个相同的副本，可以放置对象并忽略浮动元素的外部限制（我需要将页面上的一个对象居中，而不管动态浮动元素的宽度如何）。

“双重父级关系”解决了两个问题：

1. 绝对父级无法获取浮动元素的高度（但是共享父级的高度能够适应浮动元素）。

2. 相对父级不能将对象居中于页面（它只会找到浮动元素之间的中心，并防止居中内容越过浮动对象的边界）。

我做了一个演示如何使用这种设置来解决问题的fiddle（包含文档）。基本思路如下所示： 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 */
}

- Tatjana Heuser