Bootstrap 5实现主区域自适应剩余空间布局问题

需求说明 #

我要设计一个包含顶部header、侧边菜单，以及主区域内部footer的页面布局，要求：

• 主区域最小高度填充页面剩余空间，把主区域内的footer推到页面底部
• 当主区域内容超出视口高度时，整个页面可以滚动
• 不使用粘性header和footer
• 用Bootstrap 5实现，不使用CSS Grid

我尝试用Bootstrap弹性布局工具实现，但相关知识有限，附上当前尝试的代码：

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>

解决方案 #

可以通过Bootstrap 5的弹性布局工具实现这个需求，关键是确保flex容器的高度继承和内部元素的flex分配，修正后的代码如下：

修正后的CSS #

html,
body {
  height: 100%;
  margin: 0;
}

.header {
  height: 100px;
}

修正后的HTML #

<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">
  <!-- Header -->
  <div class="row bg-warning">
    <div class="col-12 py-4 header">header</div>
  </div>
  
  <!-- 侧边栏 + 主区域 -->
  <div class="row flex-grow-1 d-flex">
    <div class="col-1 bg-primary d-flex align-items-start">
      <div class="sidebar-item w-100">Sidebar</div>
    </div>
    
    <div class="col-11 px-0 d-flex flex-column">
      <!-- 主内容区域 -->
      <div class="main bg-success flex-grow-1">
        Main<br>
        <!-- 取消注释可测试滚动效果 -->
        <!-- <p>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容</p> -->
      </div>
      
      <!-- 主区域内的Footer -->
      <div class="bg-danger py-3">
        Main Footer
      </div>
    </div>
  </div>
</div>

关键修改说明 #

1. 替换自定义flex-grow类：改用Bootstrap自带的flex-grow-1类，契合框架规范
2. 中间row添加d-flex：确保row作为flex容器，让侧边栏和主区域列正确分配空间
3. 主区域列设置flex-column：给col-11添加d-flex flex-column，让内部main和footer垂直排列，main通过flex-grow-1填充剩余高度
4. 清除html/body默认边距：添加margin:0避免默认边距导致页面出现不必要的滚动条
5. 侧边栏顶部对齐：添加align-items-start保证侧边栏内容不会被拉伸变形

当主内容不足时，main区域自动填充剩余高度，将主footer推至页面底部；当主内容超出视口高度时，整个页面正常滚动，header和footer不会固定在视口内。

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