React+Tailwind项目中页脚无法固定在页面底部的问题求助

嘿，我仔细看了你的代码，发现问题主要出在DOM结构错误和布局容器没有用flex来控制页脚位置这两个地方，咱们一步步来解决：

首先，先修复一个语法bug #

你写的Home组件末尾多了一个多余的</div>标签，这个会直接破坏DOM结构，导致浏览器渲染布局错乱，先把它删掉——把</div> </main>改成</main>就好。

然后，用Tailwind的flex布局实现粘性页脚（内容不足时贴底，内容过多时在最底部） #

你的RootLayout里，当前body是普通块级元素，元素按顺序排列，想要让Footer始终在页面底部，我们需要给整个页面的容器（body）设置垂直flex布局，让中间的内容区自动占满剩余空间，把Footer推到底部：

1. 修改RootLayout的body样式，添加flex布局相关的类：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      {/* 给body添加 flex flex-col min-h-screen，让它成为垂直flex容器，高度至少占满视口 */}
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}>
        <Navbar isLoggedIn={false} />
        {/* 用div包裹children，添加flex-1，让中间内容区占满Navbar和Footer之外的所有空间 */}
        <div className="flex-1">
          {children}
        </div>
        <Footer />
      </body>
    </html>
  );
}

2. （可选）调整Home组件的main类名，把min-h-screen换成flex-1（保留也可以，但统一用flex-1更清晰）：

export default function Home() {
  return (
    <main className="flex-1 bg-gray-50">
      <section>
        <div className="relative w-full h-screen">
          <div className="absolute inset-0 bg-cover bg-center z-0 filter brightness-60">
            <Image src="/images/ggh.jpg" alt="Background" layout="fill" objectFit="cover" priority />
          </div>
          <div className="relative z-20 flex flex-col items-center justify-center h-full px-4">
            <div className="max-w-3xl text-center mb-8">
              <h1 className="text-5xl font-bold mb-4 text-white">
                The exchange site for vacations between trusted individuals
              </h1>
            </div>
            <button className="px-6 py-3 bg-[#6aa086] hover:bg-blue-700 rounded-md text-lg text-white">
              Get Started
            </button>
          </div>
        </div>
      </section>
      <section className="bg-white py-16 px-4 text-center">
        <div className="max-w-2xl mx-auto">
          <h2 className="text-3xl font-bold mb-4 text-black">Get in Touch</h2>
          <button> Explore Listings </button>
        </div>
      </section>
    </main>
  );
}

为什么之前的布局出问题？ #

1. 多余的</div>导致DOM结构错乱，浏览器自动修正后的结果不符合预期；
2. RootLayout的body没有用flex布局，页脚只是单纯跟在内容后面，当内容里有h-screen的元素时，就会看起来页脚“卡在”第一个section下方；
3. 用flex布局后，中间的内容区会自动填充Navbar和Footer之外的空间，不管内容多少，Footer都会乖乖待在页面底部啦～

内容来源于stack exchange