Html 高度后的内容物100%容器未向下推
我在一个高度为100%的容器（.container）中有三个子元素（.inner）。之后，我有另一个div（.post），它没有被压到容器下面 这是一把小提琴 HTML: 大部分内容将在Wordpress中动态生成，因此我没有我想要的那么多控制权 到目前为止，我发现并希望避免的选择是：Html 高度后的内容物100%容器未向下推,html,css,height,overflow,flow,Html,Css,Height,Overflow,Flow,我在一个高度为100%的容器（.container）中有三个子元素（.inner）。之后，我有另一个div（.post），它没有被压到容器下面 这是一把小提琴 HTML: 大部分内容将在Wordpress中动态生成，因此我没有我想要的那么多控制权 到目前为止，我发现并希望避免的选择是： 将overflow设置为auto on.container，这样可以工作，但会给我一个滚动条，留下两个滚动条（body和.container） 使用JS将实际高度设置为.container 还有别的办法吗 多亏了
多亏了一个选项是使用视口相对单位 视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度更改时，它们将相应地缩放 在这种情况下，您可以将每个
.internal100vh如果要使用JS解决此问题，则需要在
窗口上收听resize
事件。从那里，您可以将每个.internal
元素的高度设置为浏览器的高度。不过，我不建议这样做。我将在这张图上选择视口相对单位。我真的不想用js来解决这个问题。谢谢
<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>
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;
}
.inner {
height: 100vh; /* Added */
background: blue;
border: 1px solid #fff;
}