如何实现100vh的2x2 Bootstrap网格：剩余空间填充与单元格垂直滚动

要实现你需要的两个效果，只需对现有代码做几处调整，利用Bootstrap的flex布局类和溢出控制类即可：

修改要点： #

• 给最外层的.container-fluid添加d-flex flex-column，让它的子元素（两行）垂直方向排列，为后续分配剩余空间做准备
• 给第二行的.row添加flex-grow-1，让这一行自动填充第一行剩下的所有垂直空间，解决内容过短无法占满的问题
• 给单元格D的列添加h-100 overflow-y-auto，让它的高度和父行一致，同时内容超出时只在单元格内部显示垂直滚动条

修改后的完整代码： #

<body class="vh-100">
  <div class="h-100 container-fluid d-flex flex-column">
    <div class="row">
      <div class="col-10 bg-warning">
        A
      </div>
      <div class="col-2 bg-primary">
        B
      </div>
    </div>
    <div class="row flex-grow-1">
      <div class="col-2 bg-danger h-100">
        C
      </div>
      <div class="col-10 bg-success h-100 overflow-y-auto">
        D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
        with<br>scrollbars<br>only<br>
        <!-- 可添加更多内容测试滚动效果 -->
        extra line<br>extra line<br>extra line<br>extra line<br>extra line<br>
        extra line<br>extra line<br>extra line<br>extra line<br>extra line<br>
      </div>
    </div>
  </div>
</body>

效果说明： #

1. 当C、D内容过短时，第二行的.flex-grow-1会让整行占据页面剩余的所有垂直空间，C、D单元格也会跟着铺满整行高度
2. 当D单元格内容过多时，overflow-y-auto会让单元格内部出现垂直滚动条，不会影响页面其他部分的滚动

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