16

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

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

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

我知道这可以用js来完成。但我真的不喜欢用脚本调整风格。

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

4

5 回答 5

14

我有一些解决此问题的方法，它可能不适合您的情况，但请考虑查看。
首先，我们需要复制所有要让父级扩展到其高度的绝对定位 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;
}
于 2015-04-28T10:04:25.893 回答
12

单独使用 CSS 是不可能的。

布局流程：

一个元素position:absolute在页面其余部分的布局流之外。就相对父级而言，绝对子级在布局中不占空间。

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

固定高度：

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

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

于 2012-07-15T13:34:12.170 回答
3

我只能使用 jQuery lib 为您提供 JavaScript 修复。让我知道你是否使用它，

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

此行将修复 outer_box 高度

于 2012-07-15T13:37:26.423 回答
0

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

<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

于 2020-12-19T06:44:34.827 回答
-1

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

position:relative

如果这不是您想要的，或者这没有解决它，那么您将不得不使用 Javascript。

于 2012-07-15T12:58:58.333 回答