Bootstrap 4响应式页面：头部（含Logo）+导航栏+全屏高度主体实现

我来帮你搞定这个布局需求！结合Bootstrap 4的内置flex工具类，咱们可以轻松实现主体内容自动填充屏幕剩余高度，且内容溢出时显示滚动条的效果，具体步骤如下：

1. 先设置页面基础高度 #

首先要确保整个页面的根元素能撑满屏幕高度，添加以下CSS：

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

这一步是关键，因为默认情况下html和body不会自动占满整个视口高度，后续的flex布局依赖这个基础设置。

2. 重构页面布局结构 #

把整个页面包裹在一个垂直方向的flex容器里，利用Bootstrap的flex工具类来分配头部和主体的空间：

<!-- 整个页面的flex容器，高度100%，垂直排列子元素 -->
<div class="d-flex flex-column h-100">
  <!-- 你的头部区域（保持原有的响应式导航和logo） -->
  <header class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <!-- 响应式logo，img-fluid确保图片随屏幕缩放 -->
      <img src="your-logo.png" class="img-fluid" alt="客户Logo">
      <span class="ml-2 h5">客户名称</span>
      
      <!-- 小屏折叠按钮 -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <!-- 折叠导航栏 -->
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="#">服务</a></li>
          <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li>
        </ul>
      </div>
    </div>
  </header>

  <!-- 主体内容区域 -->
  <main class="flex-grow-1 overflow-auto">
    <div class="container py-4">
      <!-- 这里放你的主体内容，内容过多时会自动出现滚动条 -->
      <h2>主体内容标题</h2>
      <p>这里可以填充大量内容...当内容高度超过剩余屏幕空间时，main区域会自动显示滚动条，头部会始终固定在顶部。</p>
      <!-- 可以复制这段p标签多次测试滚动效果 -->
    </div>
  </main>
</div>

3. 关键类说明 #

• d-flex flex-column h-100：让父容器成为垂直方向的flex布局容器，且高度占满视口，这样头部和主体会按垂直方向排列。
• flex-grow-1：给main区域添加这个类，它会自动填充头部以外的所有剩余高度，不管头部是固定高度还是动态高度都能适配。
• overflow-auto：当main区域内的内容高度超过自身高度时，自动显示滚动条，保证内容可滚动且不会撑破布局。

注意事项 #

• 不要给main区域设置固定高度（比如h-50或者自定义height: 500px），否则会破坏自适应剩余高度的效果。
• 确保你的Bootstrap 4依赖文件（CSS和JS）都正确引入，尤其是折叠导航需要的bootstrap.js或者popper.js+bootstrap.js。

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