Html 包裹2个垂直堆叠的分区，1个分区100%高

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

问题 我试图将一个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>

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

顶级内容
底部内容

当然，使用JSFIDLE：

我需要的HTML如下所示：

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

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

顶级内容
底部内容

同样使用JSFIDLE：

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

问题 如何包装2个垂直堆叠的div，保持顶部div的视口填充高度？我只需要找出我应该应用于包装器的CSS，可能还有两个包装的div 这很简单，您没有为包装设置任何css参数，它还需要将高度和宽度设置为100%，边距和填充设置为0

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

---

您还需要给包装一个

高度：100%

---

通过设置

height:100%

可以告诉元素变为其父元素高度的100%。因此，您需要为

#顶部内容

的所有祖先提供100%的高度，以使

#顶部内容

占据屏幕高度的100%。

您可以使用视口单元vh<代码>100vh=视口高度的100%

---

如果您未使用

vmin

或

vmax

（也回复为@Alin），则支持无效。不幸的是，将包装的100%高度设置为100%并不能完全包装两个堆叠的div：您可以看到灰色（#ccc）背景并不能包装两个div。这也是我遇到的问题之一，事实并非如此（尝试将

overflow:hidden

添加到#包装器中，看看会发生什么）。如果对视口单位的支持对您的情况足够好（请参阅），您可以尝试为

#top

提供

高度：100vh

，而不是在每个元素上使用

高度：100%

。这似乎在JSFIDLE中起到了作用。不过，我会先在我的开发环境中测试它。我测试了它，它似乎可以工作！我将做一些更广泛的浏览器测试，但现在我将像这样离开它。谢谢：）使用jquery可以吗？可以将包装高度设置为两个内部div的合并高度。