如何实现头部高度动态变化时，页面中部滚动Div的响应式高度适配

我来帮你搞定这个布局问题！用Flex布局就能完美解决Header展开时中部自适应收缩的需求，同时保证中部内容可滚动且不超出Header和Footer的边界。下面是完整的实现方案：

核心思路 #

我们利用CSS Flexbox的垂直布局特性，让整个页面容器占满视口高度，然后合理分配三个区域的空间：

• Header：高度随内容自适应，不会被压缩
• 中部区域：自动占据Header和Footer之外的剩余空间，内容超出时自动滚动
• Footer：固定高度，始终停留在页面底部

完整代码实现 #

HTML结构 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="page-container">
    <!-- 可折叠Header -->
    <header class="page-header">
      <button class="btn btn-primary" id="toggleHeader">展开/收起Header</button>
      <div class="header-content" id="headerContent">
        <p>这是Header展开后的内容...</p>
        <p>可以添加更多内容，高度会自动变化</p>
        <p>比如多行文本、表单、图片等等</p>
      </div>
    </header>

    <!-- 居中可滚动的中部区域 -->
    <main class="page-main">
      <div class="main-content">
        <h2>中部滚动内容</h2>
        <!-- 模拟大量内容 -->
        <p>内容行 1</p>
        <p>内容行 2</p>
        <p>内容行 3</p>
        <p>内容行 4</p>
        <p>内容行 5</p>
        <p>内容行 6</p>
        <p>内容行 7</p>
        <p>内容行 8</p>
        <p>内容行 9</p>
        <p>内容行 10</p>
        <p>内容行 11</p>
        <p>内容行 12</p>
        <p>内容行 13</p>
        <p>内容行 14</p>
        <p>内容行 15</p>
        <p>内容行 16</p>
        <p>内容行 17</p>
        <p>内容行 18</p>
        <p>内容行 19</p>
        <p>内容行 20</p>
      </div>
    </main>

    <!-- 固定Footer -->
    <footer class="page-footer">
      <p>这是固定在底部的Footer内容</p>
    </footer>
  </div>

  <script>
    // 处理Header折叠/展开逻辑
    const toggleBtn = document.getElementById('toggleHeader');
    const headerContent = document.getElementById('headerContent');
    
    toggleBtn.addEventListener('click', () => {
      headerContent.classList.toggle('collapsed');
    });
  </script>
</body>
</html>

CSS样式 #

/* 重置基础样式，确保页面占满视口 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 整个页面容器，用Flex垂直布局 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* 防止整体页面滚动 */
}

/* Header部分：自适应高度，不被压缩 */
.page-header {
  flex-shrink: 0;
  background: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}

/* Header展开/收起的内容，添加过渡动画更平滑 */
.header-content {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 1rem;
}

.header-content.collapsed {
  max-height: 0;
  margin-top: 0;
}

/* 中部区域：自动占据剩余空间，内容滚动 */
.page-main {
  flex: 1;
  overflow: auto; /* 内容超出时显示滚动条 */
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  padding: 1rem;
}

.main-content {
  width: 100%;
  max-width: 800px; /* 限制内容宽度，避免太宽 */
}

/* Footer部分：固定高度，不被压缩 */
.page-footer {
  flex-shrink: 0;
  background: #f8f9fa;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  text-align: center;
}

/* 重置Bootstrap的row/col默认边距和内边距（如果用了Bootstrap的网格） */
.row {
  margin: 0;
}
.col-lg-12 {
  padding: 0;
}

关键细节说明 #

1. Flex布局核心：page-container设置为display: flex; flex-direction: column; height: 100%;，让三个子元素垂直排列并占满整个视口高度。
2. Header自适应：flex-shrink: 0确保Header不会被中部区域挤压，max-height过渡实现平滑的折叠/展开动画。
3. 中部滚动区域：flex: 1让中部自动填充剩余空间，overflow: auto在内容超出时显示滚动条，同时用display: flex实现内容居中。
4. Footer固定：同样用flex-shrink: 0固定在底部，不需要用position: fixed，避免和中部内容重叠。

这样实现后，当Header展开时，中部区域会自动收缩剩余的可用空间，并且始终保持在Header和Footer之间，内容超出时可以正常滚动，完全符合你的需求！

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