如何用Tailwind CSS实现真正的粘性页头/页脚（滚动时仍固定在底部）

完全可以实现，以下是适配不同需求的实现方案，均经过多内容长度场景验证：

方案1：始终固定在视口底部的悬浮页脚（匹配你的需求） #

这种方案会让页脚永久显示在屏幕最下方，不会随页面内容滚动消失，同时通过预留内边距避免遮挡主内容：

• 页脚添加 fixed bottom-0 left-0 w-full 类实现固定定位
• 主内容区添加对应页脚高度的底部内边距，防止内容被遮挡

完整示例代码：

<!-- 页面根容器 -->
<div class="min-h-screen">
  <!-- 主内容区 -->
  <main class="pb-16">
    <!-- 可放置任意长度内容，哪怕超出一屏也不会被页脚遮挡 -->
  </main>
  <!-- 粘性页脚，高度对应上面pb的16即4rem -->
  <footer class="fixed bottom-0 left-0 w-full h-16 bg-gray-100 border-t flex items-center px-4">
    页脚固定显示内容
  </footer>
</div>

如果需要适配iPhone等设备的底部安全区域，可给页脚额外添加 pb-safe 类（需要Tailwind v3.2及以上版本支持）。

方案2：常规粘性页脚（可选，适合页脚跟随内容的场景） #

如果你需要的是内容不足一屏时页脚贴在视口底部，内容超出一屏时页脚跟在内容末尾、滚动到页面最底部才可见，可以用flex布局实现：

<!-- 页面根容器 -->
<div class="flex flex-col min-h-screen">
  <!-- 主内容区，flex-grow会自动占满剩余高度 -->
  <main class="flex-grow">
    <!-- 任意长度内容 -->
  </main>
  <!-- 页脚 -->
  <footer class="h-16 bg-gray-100 border-t flex items-center px-4">
    页脚内容
  </footer>
</div>

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