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

Question

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

A. 问题

我正在尝试将一个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 的视口填充高度？我只需要确切地找出我应该应用于包装器以及可能的 2 个包装的div 的 CSS

Answer 1

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

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

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

如果您不使用vmin或vmax，支持还不错。

Answer 2

Working 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%。