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

Question

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

问题

我试图围绕2个垂直堆叠的div包装div。此时我有一个顶部div，它是视口填充（100％高度，100％宽度）和底部div，它具有可变高度但宽度为100％。 顶部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

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

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

Answer 2

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

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

Answer 3

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

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

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

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