高度 100% 容器后的内容未被推下答案

【问题标题】：Content after height 100% container not being pushed down高度 100% 容器后的内容未被推下
【发布时间】：2022-04-12 00:48:55
【问题描述】：

我在一个高度为 100% 的容器 (.container) 中有三个子元素 (.inner)。之后，我有另一个 div (.post) 没有被推到容器下面。

这是一个小提琴http://jsfiddle.net/yVDXQ/526/

HTML：

<html>
<body>
<div class="container">
    <div class="inner">Inner1</div>
    <div class="inner">Inner2</div>
    <div class="inner">Inner3</div>
</div>
<div class="post">Some content</div>
</body>
</html>

CSS：

html {
    height: 100%;
    }

body {
    background: red;
    height: 100%;
    }

.container {
    background: yellow;
    height: 100%;
    width: 50%;
    margin: 0 auto;
}

.inner{
    height:100%;
    background:blue;
    border:1px solid #fff;
}
.post{
    height:300px;
    width:50%;
    background: green;
}

大部分内容将在 Wordpress 中动态生成，因此我没有想要的控制权。

到目前为止，我发现并且想要避免的选择是：

在 .container 上将溢出设置为自动，这会起作用，但会给我一个滚动条，留下两个滚动条（body 和 .container）
使用JS设置.container的真实高度

还有其他方法吗？

谢谢

【问题讨论】：

标签： html css height overflow

【解决方案1】：

一种选择是使用视口相对单位。

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

在这种情况下，您可以将每个 .inner 元素的高度设置为 100vh。只需删除已定义的其他高度即可。

Updated Example

.inner {
    height: 100vh; /* Added */
    background: blue;
    border: 1px solid #fff;
}

大多数现代浏览器都支持此功能 - support can be found here。

如果你要使用 JS 来解决这个问题，你需要在 window 上监听 resize 事件。从那里，您可以将每个 .inner 元素的高度设置为浏览器的高度。不过，我不建议这样做。

【讨论】：

我要在这个上使用视口相对单位。真的想避免使用js来解决这个问题。谢谢！