填充父div高度

Question

所以。 在我的示例中，我们有3个div。 Main div是一个容器，接下来的两个是孩子的容器。 所以我想知道如何将容器扩展到超过窗口高度的100％（通过使用自动），并由第二个孩子填充高度（100％无法工作）

任何帮助都会像适当的

 #main { margin: 0 auto; width: 100%; height: auto; position: absolute; display: block; background-color: orange; } #nr1 { box-sizing: border-box; display: inline-block; width: 50%; background-color: red; float: left; padding: 5px; margin: 0 auto; height: 1500px; } #nr2 { box-sizing: border-box; display: inline-block; width: 50%; background-color: black; float: left; padding: 5px; margin: 0 auto; height: 100%; } 

 <div id="main"> <div id="nr1"> </div> <div id="nr2"> </div> </div> 

flexbox ?! 如果我要在顶部以100％的宽度和200 px的高度放置一个div，将不适合...这就是为什么它不能成为一个flaxbox- https ://jsfiddle.net/pgd5mckx/

Answer 1

您可以使用flexbox特别是flex-grow使子div增长以填充父母的身高。 以下是按预期工作的修改：

的HTML

<div id="main">
  <div id="nr1"> </div>
  <div id="nr2"> </div>

</div>

的CSS

#main {
  margin: 0 auto;
  width: 100%;
  height: auto;
  position: absolute;
  display: flex;
  flex-direction: row;
  background-color: orange;
}

#nr1 {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  background-color: red;
  float: left;
  padding: 5px;
  margin: 0 auto;
  height: 1500px;
}

#nr2 {
  box-sizing: border-box;
  width: 50%;
  background-color: black;
  float: left;
  padding: 5px;
  margin: 0 auto;
  display: flex;
  flex-grow: 1;
}

链接到工作演示： https : //jsfiddle.net/Matthew_/86ptLzxm/3/

有关flexbox的更多信息： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

在本示例中，我还没有做到这一点，但我也建议不要使用float来flexbox元素，而要使用flexbox功能。