如何让Div按页面高度百分比设置尺寸？Bootstrap 5.3问题求助

你的问题核心是百分比高度的生效必须依赖父元素有明确的高度值，当前你的.container-fluid和内部的.row都没有继承body的高度，导致子元素的百分比高度无法基于父元素计算，只能显示默认的最小高度。

关键修改点： #

• 给.container-fluid设置height: 100%，让它继承body的高度，作为内部row的高度参考基准
• 将body的min-height: 100%改为height: 100%，确保body高度明确为视口100%（若需支持内容超出视口时自动扩展高度，可保留min-height: 100vh同时加上height: 100%）
• 可选：给row添加g-0类，消除Bootstrap默认的row间距，避免页面出现不必要的滚动条

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<style>
  html {
    height: 100%;
  }
  
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .container-fluid {
    height: 100%;
  }
</style>

<body>
  <div class="container-fluid">
    <div class="row g-0">
      <div class="col-12" style="height: 5%; background-color: blueviolet">
        header
      </div>
    </div>
    <div class="row g-0" style="height: 86.5%; background-color: aliceblue">
      <div class="col-12">main</div>
    </div>
    <div class="row g-0" style="height: 1.9%; background-color: green">
      <div class="col-12">thin banner</div>
    </div>
    <div class="row g-0" style="height: 6.56%; background-color: darkslategray">
      <div class="col-12">footer</div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</html>

额外说明： #

CSS百分比高度的规则是：子元素的百分比高度仅会基于设置了明确高度值（非auto）的父元素计算。如果父元素高度为默认的auto，子元素的百分比高度会被浏览器忽略，自动 fallback 到内容的最小高度。

内容的提问来源于stack exchange，提问作者sg2019