在Next.js(App Router)+Tailwind中让内容填充Navbar与Footer间剩余空间

1. 调整RootLayout的body样式 #

给body添加min-h-screen，让flex布局的根容器占满整个视口高度，这样flex-col下的flex-1才能正确分配剩余空间：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" data-theme="cupcake">
      {/* 添加 min-h-screen 确保body占满视口高度 */}
      <body id="app" className="flex flex-col min-h-screen">
        <Navbar />
        {/* flex-1 用于占据Navbar和Footer之间的剩余空间 */}
        <div className="flex-1">
          {children}
        </div>
        <Footer />
      </body>
    </html>
  )
}

2. 确保About页面的容器填充满父级空间 #

父级的flex-1容器已经占据了剩余垂直空间，About页面的容器只需保留h-full即可继承该高度，保留原有样式：

export default function About() {
  return (
    <div className="bg-base-200 h-full w-full py-12">
      {/* 页面内容 */}
    </div>
  );
}

核心原理 #

• min-h-screen让body的最小高度匹配视口高度，为flex垂直布局提供足够的空间基础。
• flex-col将body内元素垂直排列，flex-1自动填充Navbar和Footer之外的剩余空间。
• About页面的h-full继承父级容器高度，从而填充满整个中间区域。

若仍不生效，检查Navbar和Footer是否设置了固定高度（如h-16、h-[60px]），避免它们被flex布局拉伸。

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