填充父div高度

Question

所以。在我的示例中，我们有 3 个 div。主 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>

弹性盒？！ 如果我将在顶部添加一个 100% 宽度和 200 像素高度的 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 功能。