我有一个简单的页面，其中包含标题(需要占据总页面高度的 20%)和容器，我想填充剩余页面高度(80%)。
问题是我希望容器的每个子项都是容器高度的 100%(因此容器需要扩展到实际页面总高度的 80% * 有多少个子项。
是否可以使用Flexbox让容器容纳多个元素，每个元素都是容器的总高度？
我不知道如何让一个元素都填充剩余空间，然后将其用作总高度的指示器。
无论如何，这是一个codepen demo - 简单的 html 和 css 如下:我的理想结果是每个彩色 div 都是 body 的完整高度减去 header > 高度，容器会扩展以容纳元素。
任何想法将不胜感激。
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;
}<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>最佳答案
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>
关于html - 如何使 flex 元素的子元素填充其 parent 高度的 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42476548/