Question

我有一个带标题的简单页面（需要占总页面高度的20％）和容器，我想填充剩余的页面高度（80％）。

问题在于我希望容器的每个子容器都是容器高度的100％（因此容器需要扩展到总页面高度的80％*有多少孩子。

是否可以使用Flexbox使容器容纳多个元素，每个元素都是容器的总高度？

我不知道如何使元素填充剩余空间，然后将其用作总高度的指标。

无论如何，这是一个codepen demo - 简单的html和css如下：我理想的结果是每个彩色divs都是body的全高减去header高度，容器会展开以容纳物品。

任何想法都会非常感激。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  background: blue;
  flex: 1;
}
div.holder {
  flex: 5;
  display: flex;
  flex-direction: column;
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}

＆＃13;

<body>
  <header>  
  </header>
  <div class="holder">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
     <div class="four">
      four
    </div>
  </div>
</body>

＆＃13;

Answer 1

你真的需要flexbox吗？为什么不简单地使用视口值（vw，vh）？

html, body {
  margin: 0;
}
header {
  background: blue;
  height: 20vh;
}
div.holder {
  height: 80vh;
}

div.one {
  background: green;
  height: 100%;
}

div.two {
  background: yellow;
  height: 100%;
}

div.three {
  background: red;
  height: 100%;
}

div.four {
  background: orange;
  height: 100%;
}

<body>
  <header>  
  </header>
  <div class="holder">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
     <div class="four">
      four
    </div>
  </div>
</body>

或者你可以使用百分比值，它几乎是一样的。（但是身体和html需要有100％的高度）

html, body { height: 100%; }
header { height: 20%; }
.holder { height: 80%; }
.holder > div { height: 100%; }

Answer 2

DEMO

CSS

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

header {
  background: blue;
  height:20%
}

div.holder {
  height:80%; /* <------ make it of desired height */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

div.holder > div {
  min-height: 100%; /* <------ better to provide min-height */
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}

HTML

<body>
  <header></header>
  <div class="holder">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

如何让flex项目的孩子填充父母身高的100％？

2 个答案: