Question

例如：http://jsfiddle.net/MYvYy/182/

我在'outer_box'中有很多'inner_box'元素。 Inner_box元素是绝对的。

我想调整outer_box高度，以便所有inner_box元素都适合outer_box。

我知道可以用js完成。但我真的不喜欢用脚本调整样式。

所以我想知道是否可以使用CSS完成？

Answer 1

单独使用CSS是不可能的。

布局流程：

position:absolute的元素位于页面其余部分的布局流程之外。就亲属而言，绝对子在布局中不占空间。

如果您需要在容器中嵌套弹出窗口或导航菜单，这非常有用，因为它不会影响容器的布局。这就是position:absolute非常适合的用例。

固定高度：

如果您需要绝对内容的行为就像它是布局流程的一部分一样，请使用固定高度。为相对父级和绝对子级提供固定高度，并避免在绝对子级之前放置任何可变高度的子元素。如果变量高度内容确实在它之前，请在绝对子项需要出现的位置使用具有固定高度的相对占位符div。

如果必须使用position:absolute并且无法选择固定高度，请使用JavaScript。

Answer 2

我对此问题有一些解决方法，可能不适合您的情况，但请考虑一下首先，我们需要复制您想要使父级扩展到其高度的所有绝对定位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;
}

Answer 3

我只能使用jQuery lib为您提供Javascript修复。如果您使用与否，请告诉我，

$('.outer_box').height($('.inner_box').outerHeight());

此行将修复外框高度

Answer 4

我尝试过固定高度方法，但在小屏幕上它是重叠的。所以我通过设置叠加背景层将分区和内容分开到另一个分区来解决这个问题。

<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

Answer 5

我通过将 div.inner_box 的位置属性更改为

来修复它

position:relative

如果这不是您正在寻找的，或者这没有解决它，那么您将不得不使用Javascript。

如何根据内部绝对高度调整相对div高度？

5 个答案: