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

Question

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

这是一个fiddlehttp://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

还有其他方法吗？

谢谢

Answer 1

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

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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

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

Updated Example

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

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

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

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

Content after height 100% container not being pushed down

html

css

height

overflow