最小高度与100%应用于视口高度时的高度

Question

今天，我在应用视口高度时遇到了百分比高度的问题。

.min-vh-100 {
min-height: 100vh;
}
.vh-100 {
height: 100vh;
}
.h-100 {
height: 100%;
}
.bg-cover {
background-color: red;
}
.bg-container {
background-color: blue;
}

<!-- This doesn't work -->
<!-- The .bg-container doesn't fill the .bg-cover -->
<div class="min-vh-100 bg-cover">
<div class="h-100 bg-container"></div>
</div>
<hr />
<!-- This works -->
<!-- The .bg-container fills the .bg-cover -->
<div class="vh-100 bg-cover">
<div class="h-100 bg-container"></div>
</div>

我检查了多个文档链接宽度高度关键字，百分比，但找不到背后的原因。

所以，我想知道这个问题背后的关键原因。

Answer 1

啊，我找到了原因：

百分比：

指定用于确定所用值的百分比。百分比是根据生成的长方体的包含块的高度计算的。如果未显式指定包含块的高度(即，它取决于内容高度(，并且此元素不是绝对定位的，则百分比值将被视为"0"(表示"最小高度"(或"none"(用于"最大高度"(。

---

根据上述声明，解决此问题的简单方法是应用头寸：

.min-vh-100 {
min-height: 100vh;
}
.vh-100 {
height: 100vh;
}
.h-100 {
height: 100%;
}
.bg-cover {
background-color: red;
}
.bg-container {
background-color: blue;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
width: 100%; /* or: left: 0; right: 0 */
}

<!-- Now, this works -->
<!-- The .bg-container fills the .bg-cover -->
<div class="min-vh-100 bg-cover position-relative">
<div class="h-100 bg-container position-absolute"></div>
</div>
<hr />
<!-- This works -->
<!-- The .bg-container fills the .bg-cover -->
<div class="vh-100 bg-cover">
<div class="h-100 bg-container"></div>
</div>