如何用Tailwind CSS实现内容不足时Footer固定在屏幕底部

你遇到的问题根源在于header是固定定位（不占用文档流空间），直接给main加min-h-screen会让内容高度叠加header的高度后超出视口，导致footer被挤到屏幕外。正确的做法是用垂直flex布局让页面容器占满视口，同时让main自动填充剩余空间，把footer推到底部。

修改步骤： #

• 给<body>添加flex flex-col min-h-screen类，让页面整体成为垂直方向的flex容器，且最小高度为视口高度
• 给<body>添加pt-[73px]（对应header的实际高度，可按需调整），避免内容被固定的header遮挡
• 给<main>添加flex-1类，让它自动填充header和footer之外的剩余空间
• 移除main内部容器的mt-20 md:mt-36，因为body的padding已经处理了顶部间距

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Primary Meta Tags -->
    <title>ABC Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col min-h-screen pt-[73px] bg-[#f8f7f3]">

    <header class="bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200">
        <div class="container flex flex-wrap justify-between items-center mx-auto">
            <a href="#" class="flex items-center">
                <span class="self-center text-2xl font-semibold whitespace-nowrap">ABC</span>
            </a>
        </div>
    </header>

    <main class="flex-1">
        <div class="container mx-auto px-5 md:max-w-screen-lg">
            <div class="p-6 text-center mb-10 md:mb-20">
                <h1 class="text-3xl">Blog - Articles, Insights, Tips and Tools</h1>
            </div>

            <a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
                <div class="px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2">
                    <h2 class="text-xl font-medium">Lorem ipsum dolor sit amet.</h2>
                    <p class="py-3 md:py-0 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
                    </p>
                    <div class="flex space-x-2 text-xs">
                        <p class="text-gray-500">Oct 13, 2022</p>
                        <p>|</p>
                        <p>John</p>
                    </div>
                </div>
            </a>
        </div>
    </main>

    <footer class="w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20">
        <span class="text-sm sm:text-center">© 2022 <a href="#" class="hover:underline">ABC</a>.
            All Rights Reserved.
        </span>
    </footer>

</body>

</html>

原理说明： #

• flex flex-col min-h-screen让body成为垂直flex容器，确保页面高度至少占满视口
• flex-1给main设置了flex增长因子，会自动填充header和footer之外的所有剩余空间：内容高度不足时，剩余空间会把footer推到视口底部；内容足够长时，main会被撑开，footer自然跟随在内容下方
• pt-[73px]是因为header是固定定位（不占用文档流），需要给body设置顶部内边距避免内容被header覆盖（数值可根据header实际高度调整）

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