html - 包装 2 个垂直堆叠的 div，1 个 div 100% 高

Question

我已经在 Internet 上闲逛了一段时间，但似乎找不到解决我的问题的方法。或许你能帮帮我。

问题

我试图将一个 div 包裹在 2 个垂直堆叠的 div 周围。此时我有一个顶部 div，它是视口(viewport)填充(100% 高度，100% 宽度)和一个底部 div，它的高度可变但宽度为 100%。顶部的 div 用作水平和垂直对齐内容的容器。

只要我对两个 div 应用包装器，最上面的一个就会折叠起来。它停止填充整个视口(viewport)高度。

例子

当前的 HTML 看起来像这样:

<div id="top">
    <div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>

当然还有 JSFiddle:http://jsfiddle.net/4u4nqrcv/

我需要的 HTML 如下所示:

<div id="wrapper">
    <div id="top">
        <div id="top_content">Top content</div>
    </div>
    <div id="bottom">Bottom content</div>
</div>

还有一个 JSFiddle:http://jsfiddle.net/ggsztx78/

你可以清楚地看到顶部 div 折叠

问题

如何包裹 2 个垂直堆叠的 div，同时保持顶部 div 的视口(viewport)填充高度？我只需要找出我应该将什么 CSS 应用于包装器以及可能的 2 个包装的 div

Answer 1

您可以使用视口(viewport)单位 vh。 100vh = 视口(viewport)高度的 100%。

http://jsfiddle.net/ggsztx78/3/

#top {
    width: 100%;
    height: 100vh;
    background-color: #f4f;
    display: table;
}

支持不是 that bad如果您没有使用 vmin 或 vmax。