Question

所以。在我的示例中，我们有3个div。 Main div是一个容器，接下来的两个是孩子的容器。所以我想知道如何将容器扩展到超过窗口高度的100％（通过使用auto），并由第二个孩子填充高度（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作为广告，将不适合... 这就是为什么它不能成为亚麻盒的原因-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功能。

填充父div高度

1 个答案: