例如：http://jsfiddle.net/MYvYy/182/
我在“outer_box”中有很多“inner_box”元素。 Inner_box 元素是绝对的。
我想调整outer_box 的高度，使所有inner_box 元素都适合outer_box。
我知道可以用js来完成。但我不太喜欢用脚本调整样式。
所以我想知道是否可以使用 CSS 来完成？
【问题讨论】：
标签： html css css-position
我有一些解决此问题的方法，它可能不适合您的情况，但请考虑查看。
首先，我们需要复制所有绝对定位的div，你想让父级扩展到它的高度。
所以你的HTML 会是这个样子。
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
然后我们需要像这样添加“ghost div”CSS：
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
【讨论】：
visibility: hidden的css只隐藏了内容，高度和宽度仍然可用。与display: none 不同，隐藏元素并移除高度和宽度，但保留填充和边距。 Heres a Fiddle
单独使用 CSS 是不可能的。
布局流程：
带有position:absolute 的元素位于页面其余部分的布局流程之外。就相对父级而言，绝对子级在布局中不占空间。
如果您需要在容器内嵌套弹出菜单或导航菜单，这将非常有用，因为它不会影响容器的布局。这就是 position:absolute 非常适合的用例。
固定高度：
如果您需要将绝对内容表现得好像它是布局流程的一部分，请使用固定高度。给相对父级和绝对子级一个固定的高度，并避免在绝对子级之前放置任何高度可变的子元素。如果可变高度内容确实在它之前，请在绝对子项需要出现的位置使用具有固定高度的相对占位符 div。
如果必须使用 position:absolute 并且不能选择固定高度，请使用 JavaScript。
【讨论】：
我只能使用 jQuery lib 为您提供 JavaScript 修复。 让我知道你是否使用它，
$('.outer_box').height($('.inner_box').outerHeight());
这条线将固定outer_box的高度
【讨论】：
我尝试了固定高度方法，但在小屏幕上它是重叠的。所以我通过将覆盖背景层设置为单独的分区和内容到另一个分区来解决这个问题。
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
我已经在 Codepen 上上传了代码：https://codepen.io/shahbaz8x/pen/GRjEBze
【讨论】：
我通过将 div.inner_box 的 position 属性更改为
来修复它position:relative
如果这不是您想要的，或者这没有解决它，那么您将不得不使用 Javascript。
【讨论】：