我正在做一个新的设计，我有一个页眉，一个侧菜单，和一个页脚内的主要部分。

我试图使主要部分填充剩余的空间作为最小高度，将页脚推到页面的底部。
如果需要的话，我希望主要部分占据剩余的空间，但是当主要部分大于视图高度时，所有内容都应该滚动，所以没有粘性的页眉或页脚。
这是可以在Bootstrap 5中完成的吗？我看到在谈论CSS网格时经常提到这些类型的设计，但我想知道没有它是否可行。
我尝试过使用bootstrap flex实用程序进行不同的设置，但我的Bootstrap/CSS知识仅限于此。

html,
body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.header {
  height: 100px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" defer></script>

<div class="h-100 container-fluid d-flex flex-column">
  <div class="row bg-warning">
    <div class="col-12 py-4 header">header</div>
  </div>
  
  <div class="row no-gutter flex-grow">
    <div class="col-1 bg-primary">
      <div class="sidebar-item">Sidebar</div>
    </div>
    
    <div class="col-11 px-0">
      <div class="main bg-success flex-grow">
        Main
      </div>
      
      <div class="bg-danger py-3">
        Main Footer
      </div>
    </div>
  </div>
</div>