如何实现固定头部与底部的全屏高度滚动效果？

核心思路 #

要实现滚动条贯穿浏览器全高，同时头部/底部固定，关键是将滚动条绑定到整个页面（而非主内容容器），通过固定定位锁定头部和底部，主内容区域预留对应空间避免遮挡。

Tailwind CSS 实现方案 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen overflow-y-auto">
  <!-- 固定头部 -->
  <header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="py-4 px-6">头部内容</div>
  </header>

  <!-- 主内容区域：预留头部和底部高度的内边距 -->
  <main class="min-h-screen pt-16 pb-12 px-6">
    <!-- 此处放置你的内容，测试时可添加大量重复文本验证溢出滚动 -->
    <div class="space-y-4">
      <p>测试内容</p>
      <p>测试内容</p>
      <!-- 重复多行... -->
    </div>
  </main>

  <!-- 固定底部 -->
  <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="py-4 px-6">底部内容</div>
  </footer>
</body>
</html>

关键设置说明：

• body 添加 min-h-screen overflow-y-auto：确保页面至少占满屏幕高度，内容溢出时显示全高滚动条，内容不足时无滚动条。
• 头部/底部用 fixed top-0/fixed bottom-0 固定位置，z-50 保证层级高于主内容，避免被遮挡。
• main 的 pt-16 和 pb-12 需根据头部/底部实际高度调整，确保内容不被固定栏遮挡。

纯 CSS 实现方案 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      overflow-y: auto;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 1rem;
      z-index: 50;
    }

    main {
      min-height: 100vh;
      padding-top: 4rem; /* 匹配header高度 */
      padding-bottom: 3rem; /* 匹配footer高度 */
      padding-inline: 1.5rem;
    }

    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
      padding: 1rem;
      z-index: 50;
    }
  </style>
</head>
<body>
  <header>头部内容</header>
  <main>
    <!-- 测试内容 -->
    <p>测试内容</p>
    <p>测试内容</p>
    <!-- 重复多行... -->
  </main>
  <footer>底部内容</footer>
</body>
</html>

原方案问题说明：

你之前的方案将滚动条限制在 main 容器内，导致滚动条高度仅为中间内容区域的高度。而新方案把滚动条绑定到 body，自然贯穿浏览器整个视口高度，同时通过固定定位让头部/底部保持不动，完全满足所有需求。

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