Vue3+Tailwind CSS固定头尾布局移动端内容被裁剪求助

问题根源 #

移动端浏览器的100vh会包含顶部状态栏、底部导航栏的高度，再加上固定定位的header和footer，会直接挤压主内容区域导致裁剪；另外未适配移动端安全区域，也会让内容被系统UI遮挡。

修复步骤 #

1. 修正视口元标签 #

确保public/index.html里的视口标签添加viewport-fit=cover，让页面能覆盖整个屏幕并支持安全区域适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 适配安全区域 #

给header和footer加上Tailwind内置的安全区域内边距，避免内容被系统栏遮挡：

• 头部加pt-safe适配顶部状态栏
• 底部加pb-safe适配底部导航栏

3. 替换固定视口高度为动态计算 #

放弃直接使用h-screen，改用min-h-[100svh]（svh是浏览器可用的最小视口高度，自动排除系统UI占用空间），再让主内容区域自动填充剩余高度：

<template>
  <div class="min-h-[100svh] flex flex-col">
    <!-- 固定头部 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-md pt-safe z-50">
      <!-- 头部内容 -->
    </header>

    <!-- 主内容：预留header和footer的高度，自动填充剩余空间 -->
    <main class="flex-1 pt-[60px] pb-[50px]">
      <!-- 页面内容 -->
    </main>

    <!-- 固定底部 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-gray-800 text-white pb-safe z-50">
      <!-- 底部内容 -->
    </footer>
  </div>
</template>

注：pt-[60px]和pb-[50px]需要替换成你实际的header和footer高度

4. 可选：自定义Tailwind工具类简化操作 #

如果需要更简洁的写法，可以在tailwind.config.js里添加自定义工具类：

module.exports = {
  // ...其他配置
  theme: {
    extend: {
      height: {
        'screen-safe': '100svh',
      },
    },
  },
}

之后直接用h-screen-safe替代min-h-[100svh]即可。

验证效果 #

修改后在真实移动设备上测试，主内容区域会自动适配剩余可用高度，既不会被裁剪，也不会被系统状态栏、导航栏遮挡。

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