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

Question

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

问题

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

当我对两个 div 应用包装器时，顶部的 div 就会崩溃。它停止填充整个视口高度。

例子

当前的 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 的视口填充高度？我只需要确切地找出我应该应用到包装器的 CSS 以及可能的 2 个包装的 div

Answer 1

您可以使用视口单元 vh。 100vh = 视口高度的 100%。

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

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

如果您不使用vmin 或vmax，则支持不是that bad。

Answer 2

工作JSfiddle 很简单，你没有为包装器设置任何 css 参数，它还需要具有 100% 的高度和宽度，边距和填充设置为 0。

#wrapper{
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

Answer 3

您还需要给包装器一个height: 100%。

通过设置height: 100%，你告诉一个元素变成其父元素高度的100%。因此，您需要为 #top-content 的所有祖先设置 100% 的高度，以使 #top-content 占据屏幕高度的 100%。