Html 如何使用Bootstrap 4拉伸嵌套列

给出此布局示例：

“标题”列为固定高度。所有其他列都具有可变内容，其高度随所示页面而异

---

如何使“菜单”和“内容”列向下延伸到“页脚”？

如果您可以使用flexbox，那么这可能是一个解决方案：

<div class="container-fluid">
  <div class="row" >
    <div class="col-9 bg-danger" style="display:flex;flex-direction: column">
      <div class="row" style="height: 3rem">
        <div class="col-12" >
          <h1 class="text-center">HEADER</h1>
        </div>
      </div>
      <div class="row" style="flex-grow:1">
        <div class="col-3 bg-success">MENU</div>
        <div class="col-9 bg-warning">CONTENT</div>
      </div>
    </div>
    <div class="col-3 bg-info">
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
    </div>
  </div>
  <div class="row bg-primary">
    <div class="col-12">
      <div class="text-center">FOOTER</div>
    </div>
  </div>
</div>

标题
菜单
内容
边栏

边栏

边栏

边栏

页脚

这很有效。谢谢BS4为“display:flex”（d-flex）和“flex direction”（flex column）属性提供了类，但仅为“flex grow:1”提供了类。