11

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

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

谢谢！

4

2 回答 2

4

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

如果你包含了 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>
于 2012-11-27T00:34:20.407 回答
3

你可以：通过我称之为“双亲”的东西：

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

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

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

我做了一个小提琴（包含文档），演示了这个设置如何挤压和挤压，同时仍然保持居中的盒子。下面的代码概述了基本思想：

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 */
}
于 2014-09-14T19:51:31.557 回答