100％高度div包装，100％高度儿童扩展

Question

如何获得100％高度的包装器div以扩展其子级的高度？这也是100％的高度。

设置如下：

<div id="wrapper" style="height:100%">
  <div class="child" style="height:100%">div1</div>
  <div class="child" style="height:100%">div2</div>
</div>

但是包装纸不能扩展到200％的高度。我尝试过制作包装min-height:100%;，但孩子们不会继承全高，只能继承自己内容的高度。

https://jsfiddle.net/on78pof8/

（浅绿色的盒子，不会扩大）

Answer 1

在子div上以视口单位设置高度

.child {
  height:100vh;
}

Demo (with viewport units)

（注意：OP实际上对包装纸上的背景图像感兴趣而不是固体浅绿色）

html,
body {
  height: 100%;
}
#wrapper {
  background: aqua;
}
.child {
  height: 100vh;
}

<div id="wrapper">

  <div class="child">div1</div>

  <div class="child">div2</div>

</div>

如果你不想使用视口单元（顺便说一下 - 正如@CoadToad在评论中指出的那样 - 有very good support） - 那么我认为你将不得不使用javascript。

Demo (with javascript)

Answer 2

如果我没有正确理解这个问题，请告诉我。 我想你已忘记将width:100%;添加到子div。

要删除html / body上的额外滚动条，您可以使用此声明删除html和body的默认边距/填充：

html,body{
   margin:0;
   padding:0;
}

以下是我相信你的想法：

html,
body {
  height: 100%;
  margin:0;
  padding:0;
}
#wrapper {
  background: aqua;
  height: 100%;
  overflow: auto;
}
.child {
  height: 100%;
  width: 100%;
}

<div id="wrapper">

  <div class="child">div1</div>

  <div class="child">div2</div>

</div>

Answer 3

如果你想要一个动态数字作为子div的高度，根据你的需要，你可以从视口高度（vw）设置这些，但这假设你希望它们都是整个高度的整个高度文档。

Answer 4

您需要在父级上设置overflow-y: auto才能生效。这里：

＆＃13;

＆＃13;

html,body {
  height:100%;
  margin: 0;
}

#wrapper {
  background:aqua;
  height:100%;
  overflow-y: auto;
}

.child {
  height:100%;
  }

＆＃13;

<div id="wrapper">
  
  <div class="child">div1</div>
  
  <div class="child">div2</div>

</div>

＆＃13;

＆＃13;

＆＃13;