React+TailwindCSS添加导航栏后内容超出屏幕问题求助

问题出在固定高度的容器设置和强制屏幕宽度引发的边距冲突，下面是具体修复方案：

1. 调整主容器的布局与高度 #

你的main标签使用h-screen强制高度等于屏幕尺寸，但Navbar本身带有p-5内边距（存在实际高度），加入后Navbar+About的总高度会超出屏幕，导致纵向滚动条和底部空白。

修改App.js的main类与结构：

import React from "react";
import About from "./components/About";
import Navbar from "./components/Navbar";

export default function App() {
  return (
    <main className="m-0 min-h-screen flex flex-col bg-gray-50 body-font text-gray-600 font-display">
      <Navbar />
      <About className="flex-1" /> {/* 让About填充Navbar之外的剩余空间 */}
    </main>
  );
}

• min-h-screen：保证容器最小高度为屏幕高度，内容超出时自动延伸
• flex flex-col：让Navbar和About垂直排列
• flex-1：赋予About组件弹性，自动填充剩余空间

2. 移除强制宽度，解决横向空白 #

w-screen会强制容器宽度等于屏幕宽度，但浏览器默认body带有margin，二者叠加会导致容器超出视口，出现横向滚动条。直接移除w-screen改用w-full，或全局清除body默认边距：

若使用Tailwind全局样式，在tailwind.css中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply m-0;
  }
}

3. 优化About组件的高度适配 #

About组件中的h-full可保留，配合父容器的flex-1会自动填充剩余空间，无需额外调整。若仍有垂直对齐问题，确保container的h-full属性正常生效即可。

效果验证 #

修改后，Navbar会在大屏设备上固定于顶部（md:sticky生效），About部分填充剩余屏幕高度，页面不会出现超出视口的空白，滚动条仅在内容真正超出时触发。

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