我一直在互联网上漫步一段时间，但我似乎无法找到解决我的问题。也许你可以帮助我。包装2垂直堆叠divs，1 div 100％高

问题

我想围绕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，保持顶格的视填充高度？我只需要找出我应该申请什么CSS来包装，并有可能在2周包裹的div

来源

2014-12-06 Peter de Leeuw

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

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

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

支持，如果你不使用vmin或vmax不that bad。

来源

2014-12-06 13:15:39

这似乎是在JSFiddle中做的伎俩。不过我会首先在我的开发环境中测试它。 – 2014-12-06 13:38:53

我测试了它，它似乎工作！我会做一些更广泛的browsertesting，但现在我会离开它像这样。谢谢：） – 2014-12-06 16:37:43

工作JSfiddle 这很容易，你没有设置任何CSS参数的包装，它需要也有身高和宽度为100％，边距和填充设置为0.

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

来源

2014-12-06 13:00:30 Alin

你可以使用jQuery来做这件事吗？您可以将包装高度设置为具有两个内部div的组合高度。 – Alin 2014-12-06 13:58:28

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

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

来源

2014-12-06 13:02:52 ckuijjer

（也回复@Alin）不幸的是，将100％高度设置为包装并不能完全包裹这两个堆叠的div：http://jsfiddle.net/ggsztx78/2/ 您可以看到灰色（#ccc）背景doesn不会包装两个div。这也是我经历的问题之一。 – 2014-12-06 13:10:58

它确实没有（尝试向#wrapper添加'overflow：hidden'来查看会发生什么）。如果视口单元的支持足够满足您的情况（请参阅http://caniuse.com/#feat=viewport-units），您可以尝试给''top''height：100vh'而不是使用'height： 100％'在每个元素上。 – ckuijjer 2014-12-06 13:14:10

包装2垂直堆叠divs，1 div 100％高

问题

的例子

问题

回答

相关问题