Bootstrap实现全屏高度布局：顶部区域自适应高度方案

嘿，我明白你的困扰了！你想要的是顶部区域始终保持96px和屏幕高度20%中的较大值，底部区域自动占据剩余高度，而不是用固定的80%高度（毕竟当屏幕很小的时候，20vh可能比96px小，这时候80%就不对了）。

其实借助Bootstrap的Flexbox工具类就能完美解决这个问题，不需要写太多自定义样式，而且更灵活。下面是修改后的代码和详细解释：

<div class="container-fluid d-flex flex-column" style="height: 100vh">
  <!-- 顶部区域：最小高度取96px和20vh的较大值 -->
  <div class="row" style="min-height: max(96px, 20vh)">
    <div class="col"> Top Bar </div>
  </div>
  <!-- 底部区域：自动填充剩余高度 -->
  <div class="row flex-grow-1">
    <div class="col-md-2"> Bottom Left </div>
    <div class="col-md-10"> Bottom Right </div>
  </div>
</div>

关键修改点说明： #

1. 给最外层容器添加d-flex flex-column：
   把container-fluid变成垂直方向的Flex容器，这样内部的row会沿着垂直方向排列，并且可以通过Flex属性控制它们的空间分配。

2. 顶部row设置min-height: max(96px, 20vh)：
   这个CSS函数max()会自动取两个值中的较大者，完美满足你“顶部高度取96px与屏幕高度20%中的较大值”的需求，不管屏幕尺寸怎么变，顶部都不会低于这两个值中的任何一个。

3. 底部row添加flex-grow-1类：
   Bootstrap的这个内置类相当于设置了flex-grow: 1，它会让这个row自动占据Flex容器中所有剩余的空间，这样不管顶部高度是多少，底部都会填满剩下的屏幕高度，再也不会出现桌面端被挤压的情况。

这个方案比你之前用height:80%的临时方法更健壮，因为它能自适应顶部高度的变化，不管是屏幕变大还是变小，布局都能保持正确的比例和空间分配，移动端也能正常工作哦！

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