Question

我在容器（.container）中有三个子元素（.inner），高度为100％。在那之后，我有另一个div（.post）没有被压下容器。

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上设置溢出到自动，这可以工作，但给我一个滚动条，留下两个滚动条（正文和.container）
使用JS将实际高度设置为.container

还有其他办法吗？

由于

Answer 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来解决此问题，则需要在resize上收听window事件。从那里，您可以将每个.inner元素的高度设置为浏览器的高度。不过，我不建议这样做。

高度100％容器未被压下的内容

1 个答案: