以百分比形式设置 div 的高度

Question

我想像height: 10%一样使用百分比单位来调整flex容器的大小，但它只适合内容的height。如果我尝试使用px，它是有效的，但我肯定需要百分比。

.top_section {
display: flex;
height: 10%;
background-color: #8ac858;
}

<div class="top_section">
<div class="nav menu">
<a href="#" class="nav_unit">Home</a>
<a href="#" class="nav_unit">Rating</a>
<a href="#" class="nav_unit">Map</a>
</div>
<div class="auth_menu">
<a href="#" class="auth_text">Register</a>
<a href="#" class="auth_text">Login</a>
<input type="text" class="login">
<input type="password" class="password">
</div>
</div>

这种情况下我该怎么办？

Answer 1

.top_section具有height: 10%。所以.top_section的高度将是其父代的10%。因此，您需要设置其父元素的高度。

例如，如果它的父级是body，那么您可以拥有

body: {
height: 100vh;
}