为什么红色部分不占可用高度的100%我的意思是为什么红色部分占100vh的100%而不是100vh-10px-40px(黑色和蓝色高度(
.black {
height: 10px;
background-color: black;
}
.red {
height: 100%;
background-color: red;
}
.blue {
height: 40px;
background-color: blue;
}
body {
height: 100vh;
margin: 0;
padding: 0;
}<body>
<div class="black"></div>
<div class="red"></div>
<div class="blue"></div>
</body>100%不会为您计算剩余可用部分。你可以使用css的calc()函数。
.red {
height: calc(100% - 10px - 40px);
background-color: red;
}
CSS中的百分比是相对于另一个值的。在这种情况下，您的百分比是相对于父对象的height属性的。
由于红色元素是父元素的height的100%，并且父元素的高度是100vh，因此红色元素的高度也将为100vh。
要自动重新分配剩余空间，可以使用Flexbox或CSS Grid:
/* Flexbox */
#flexbox {
display: flex;
flex-direction: column;
}
#flexbox .red {flex-grow: 1}
/* CSS Grid */
#grid {
display: grid;
grid-template-rows: auto 1fr auto;
}
/* Presentational styling */
#flexbox, #grid {
border: 1px solid black;
height: 200px;
}
.black {
height: 10px;
background-color: black;
}
.red {background-color: red}
.blue {
height: 40px;
background-color: blue;
}<section>
<header>Flexbox</header>
<div id="flexbox">
<div class="black"></div>
<div class="red"></div>
<div class="blue"></div>
</div>
</section>
<section>
<header>CSS Grid</header>
<div id="grid">
<div class="black"></div>
<div class="red"></div>
<div class="blue"></div>
</div>
</section>或者，您可以使用calc()自己计算剩余空间，可以使用幻数，也可以使用自定义属性：
/* calc() */
#calc {
--h-black: 10px;
--h-blue: 40px;
}
#calc .red {
height: calc(100% - var(--h-black) - var(--h-blue));
}
/* Presentational styling */
#calc {
border: 1px solid black;
height: 200px;
}
.black {
height: var(--h-black);
background-color: black;
}
.red {background-color: red}
.blue {
height: var(--h-blue);
background-color: blue;
}<div id="calc">
<div class="black"></div>
<div class="red"></div>
<div class="blue"></div>
</div>