求助：基于Bootstrap 5.2实现固定导航+侧边栏+固定页脚的响应式布局

核心布局代码实现 #

直接用Bootstrap自带类+少量自定义CSS即可完成需求，无需手写大量媒体查询：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定布局示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 仅需少量适配CSS */
    .sidebar {
      top: 56px; /* 匹配Bootstrap默认导航栏高度 */
      bottom: 56px; /* 匹配页脚高度 */
      overflow-y: auto; /* 侧边栏内容过多时滚动 */
    }
    .main-content {
      margin-top: 56px; /* 避开顶部导航 */
      margin-bottom: 56px; /* 避开底部页脚 */
      overflow-y: auto;
      min-height: calc(100vh - 112px); /* 占满导航与页脚间的空间 */
    }
    /* 小屏幕自动适配侧边栏布局 */
    @media (max-width: 991px) {
      .sidebar {
        position: relative !important;
        top: auto;
        bottom: auto;
        height: auto;
      }
      .main-content {
        margin-top: 0;
        margin-bottom: 56px;
        min-height: calc(100vh - 56px);
      }
    }
  </style>
</head>
<body>
  <!-- 顶部固定导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">网站标题</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="#">设置</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <!-- 左侧固定侧边栏 -->
      <aside class="col-lg-3 col-md-4 bg-light sidebar position-fixed">
        <div class="p-3">
          <h5>侧边菜单</h5>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link active" href="#">菜单项1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">菜单项2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">菜单项3</a></li>
          </ul>
        </div>
      </aside>

      <!-- 可滚动主内容区 -->
      <main class="col-lg-9 col-md-8 offset-lg-3 offset-md-4 main-content">
        <!-- 普通滚动内容示例 -->
        <div class="p-4">
          <h2>主内容区域</h2>
          <p>内容超出导航与页脚间高度时会自动滚动</p>
          <!-- 重复内容模拟高度 -->
          <p>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br>示例内容<br></p>
        </div>

        <!-- 表单垂直水平居中示例（替换上面普通内容即可） -->
        <!-- <div class="d-flex justify-content-center align-items-center h-100">
          <div class="card p-4" style="width: 400px;">
            <h3 class="text-center mb-4">登录表单</h3>
            <form>
              <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username">
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password">
              </div>
              <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
          </div>
        </div> -->
      </main>
    </div>
  </div>

  <!-- 底部固定页脚 -->
  <footer class="navbar navbar-dark bg-dark fixed-bottom">
    <div class="container-fluid justify-content-center">
      <span class="text-muted">© 2024 网站版权所有</span>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键实现要点 #

• 顶部导航：用fixed-top固定，搭配navbar-expand-lg实现小屏幕折叠，无需自定义响应式逻辑。
• 侧边栏：通过position-fixed固定，设置top/bottom避开导航和页脚；用Bootstrap网格类col-lg-3 col-md-4控制宽度，小屏幕自动转为流式布局。
• 主内容区：用offset类避开侧边栏，min-height确保占满可用空间，overflow-y:auto实现内容滚动。
• 表单居中：在主内容区内添加d-flex justify-content-center align-items-center h-100三个Bootstrap类，即可实现垂直水平居中，零额外CSS。

替代方案：纯CSS Grid布局 #

如果不想用框架，纯CSS Grid也能实现同样效果，结构更简洁：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid固定布局</title>
  <style>
    body {
      margin: 0;
      display: grid;
      grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
      grid-template-rows: 56px 1fr 56px;
      grid-template-columns: 280px 1fr;
      min-height: 100vh;
    }
    header { grid-area: header; background: #343a40; color: #fff; display: flex; align-items: center; padding: 0 1rem; }
    aside { grid-area: sidebar; background: #f8f9fa; overflow-y: auto; padding: 1rem; }
    main { grid-area: main; overflow-y: auto; padding: 1rem; }
    footer { grid-area: footer; background: #343a40; color: #fff; display: flex; align-items: center; justify-content: center; }

    /* 小屏幕适配 */
    @media (max-width: 991px) {
      body {
        grid-template-areas: 
          "header"
          "sidebar"
          "main"
          "footer";
        grid-template-rows: 56px auto 1fr 56px;
        grid-template-columns: 1fr;
      }
    }

    /* 表单居中样式 */
    .centered-form {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  </style>
</head>
<body>
  <header>网站标题</header>
  <aside>
    <h5>侧边菜单</h5>
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
    </ul>
  </aside>
  <main>
    <!-- 普通内容 -->
    <p>主内容区域...</p>
    <!-- 表单居中示例 -->
    <!-- <div class="centered-form">
      <div style="width: 400px; padding: 2rem; border: 1px solid #eee; border-radius: 8px;">
        <h3>登录</h3>
        <form>
          <div>
            <label>用户名</label>
            <input type="text" style="width: 100%; padding: 0.5rem; margin: 0.5rem 0;">
          </div>
          <div>
            <label>密码</label>
            <input type="password" style="width: 100%; padding: 0.5rem; margin: 0.5rem 0;">
          </div>
          <button style="width: 100%; padding: 0.5rem; background: #0d6efd; color: #fff; border: none; border-radius: 4px;">登录</button>
        </form>
      </div>
    </div> -->
  </main>
  <footer>© 2024 网站版权所有</footer>
</body>
</html>

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