Tailwind CSS h-screen移动端浏览器底部菜单溢出问题求助

问题根源在于你使用的h-screen是基于静态视口高度计算的，手机浏览器非全屏状态下，顶部地址栏、底部工具栏会占用部分屏幕空间，导致实际可显示的内容高度被压缩，Footer因此被挤出可视区域。

以下是两种可行的修复方案：

方案1：使用动态视口高度（推荐） #

Tailwind支持dvh（Dynamic Viewport Height）单位，它会实时适配浏览器工具栏的显示/隐藏状态，自动计算当前实际可用的屏幕高度：

<div class="h-dvh flex flex-col">
    <div>
        Header
    </div>
    <div class="flex-1 overflow-y-auto">
        Main
    </div>
    <div>
        Footer
    </div>
</div>

这个方案能完美适配各种浏览器状态，无需额外处理。

方案2：兼容旧浏览器的降级方案 #

如果需要兼容不支持dvh的旧浏览器，可以用min-h-screen替代h-screen，同时确保页面根元素没有默认边距：

<body class="m-0">
    <div class="min-h-screen flex flex-col">
        <div>
            Header
        </div>
        <div class="flex-1 overflow-y-auto">
            Main
        </div>
        <div>
            Footer
        </div>
    </div>
</body>

min-h-screen让容器至少占满视口高度，当内容超出时，Main区域的overflow-y-auto会自动出现滚动条，Footer始终固定在可视区域底部。

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