Bootstrap 4：如何为无滚动单页应用（SPA）实现响应式高度？

嘿，作为刚接触响应式设计和Bootstrap的新手，你遇到的这个Flex高度传递问题其实非常常见——我当初刚用Bootstrap Flex的时候也踩过一模一样的坑！咱们一步步来拆解解决：

一、不用h-100，纯Flex实现响应式布局切换 #

核心问题在于Flex容器的高度传递逻辑：h-100是强制设置元素高度为100%，但如果父元素没有明确的高度，这个100%就会“失效”或者导致溢出。而纯Flex布局的思路是让容器通过“弹性分配剩余空间”来实现高度占满，不用硬设h-100。

调整后的代码方案 #

1. 优化SCSS基础样式

先把html/body的高度设置改成更灵活的方式，同时让body成为Flex容器，用来承载顶部header和主内容区：

@import "../node_modules/bootstrap/scss/bootstrap";

html, body {
  min-height: 100vh; /* 确保至少占满视口高度 */
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* 垂直排列header和主内容 */
}

#mainContent {
  flex-grow: 1; /* 让主内容区占满header之外的剩余空间 */
}

2. 修改HTML结构

去掉不必要的h-100，让Flex的弹性属性来控制空间分配：

<app-header></app-header>
<div class="container-fluid d-flex" id="mainContent">
  <!-- 用d-flex替代h-100，让row成为Flex容器 -->
  <div class="row flex-column-reverse flex-md-row flex-grow-1">
    <!-- 左侧侧边栏：小屏占满宽度，大屏占3份，用flex-grow控制空间 -->
    <div class="col-md-3 col-12 d-flex flex-column">
      <div class="d-flex flex-column flex-grow-1 justify-content-between">
        <div>
          <app-channels></app-channels>
        </div>
        <div>
          <app-settings></app-settings>
        </div>
      </div>
    </div>
    <!-- 右侧消息区：小屏占满宽度，大屏占9份，自动填充剩余空间 -->
    <div class="col-md-9 col-12 d-flex flex-grow-1">
      <app-messages></app-messages>
    </div>
  </div>
</div>

为什么这样有效？

• body设为flex-column后，#mainContent通过flex-grow:1自动占满header下方的所有剩余空间，不用硬设高度。
• 内层的row用flex-grow-1确保它占满父容器的空间，再通过flex-column-reverse flex-md-row实现小屏（侧边栏在下）、大屏（侧边栏在左）的布局切换。
• 每个col都用d-flex flex-grow-1，让它们的子组件（比如app-messages）能自动填充所在列的空间，不用额外加h-100。

二、关于响应式高度类（比如h-sm-100） #

Bootstrap 5默认确实没有内置的h-{breakpoint}-100这类响应式高度工具类，但你可以自己快速生成，或者用媒体查询手动实现：

方式1：用Sass生成自定义响应式高度类 #

如果你的项目用Bootstrap的Sass，可以借助它的断点mixin来批量生成：

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    .h-#{$breakpoint}-100 {
      height: 100% !important;
    }
    .min-h-#{$breakpoint}-100 {
      min-height: 100% !important;
    }
  }
}

这样编译后就会生成h-sm-100、h-md-100等类，和其他响应式工具类用法一致。

方式2：手动写媒体查询 #

如果不用Sass，直接写CSS也很简单：

/* 小屏及以上生效 */
@media (min-width: 576px) {
  .h-sm-100 {
    height: 100% !important;
  }
}

/* 中屏及以上生效 */
@media (min-width: 768px) {
  .h-md-100 {
    height: 100% !important;
  }
}

三、你原来代码出问题的原因 #

你用h-100后右侧被挤出，是因为：

• container-fluid本身没有被设置为Flex容器，也没有明确的高度，导致里面的row h-100的高度是基于“不确定的父容器高度”计算的，容易溢出视口。
• flex-fill和flex-grow-1只有在父元素是Flex容器的时候才会生效，你原来的row虽然是Flex容器，但它的父容器container-fluid不是，所以弹性属性无法正确传递。

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