是否有可能使用最新的 CSS 来获得灵活的高度 div (a) 和 div (b) 以填充页面？
行中的内容:
div.a { height: calc(100% - div.a.height); }
body {
background-color: #FEFEFE;
}
div {
padding: 20px;
margin: 10px;
border: 4px solid black;
width: 100px
}
div.a {
background-color: #278dae;
}
div.b {
background-color: #409b24;
/*height: calc(100% - div.a.height); <-- this */
}<body>
<div class="a">a</div>
<div class="b">b</div>
</body> 
最佳答案
Flexbox 可以做到这一点:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #FEFEFE;
display: flex;
flex-direction: column;
}
div {
padding: 20px;
margin: 10px;
border: 4px solid black;
width: 100px
}
div.a {
background-color: #278dae;
}
div.b {
flex: 1;
background-color: #409b24;
}<body>
<div class="a">a</div>
<div class="b">b</div>
</body>关于css - 第二个 div 的填充高度为页面的 100%(纯 css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33547493/