Next.js布局中Div超出屏幕的溢出问题求助

问题分析 #

你的代码里有几个关键问题导致内容溢出视口：

1. w-screen 会强制元素宽度等于屏幕视口宽度，但浏览器默认的body/html边距、滚动条宽度会让元素实际超出视口；
2. 绝对定位的切换按钮未绑定到父元素，会相对于整个文档定位，可能触发水平滚动；
3. Flex布局的类名写错（items应为items-center），导致垂直布局异常；
4. 未清除浏览器默认的margin/padding，加剧了溢出问题。

解决方案 #

1. 修复根布局的全局样式

修改Layout.tsx中的body类名，清除默认边距并禁止水平溢出：

<body className={`${geistSans.variable} ${geistMono.variable} antialiased m-0 p-0 overflow-x-hidden`}>

2. 调整Page.tsx的布局代码

修正宽度、定位及flex类名：

import { ModeToggle } from "@/components/dark-mode-toggle";

export default function Home() {
  return (
    <>
      <div className="border border-red-200 w-full relative">
        <div className="absolute right-0 m-4 outline outline-1 dark:outline-white outline-black rounded-sm">
          <ModeToggle />
        </div>
        <div className="flex items-center justify-center h-screen w-full">
          Hello
        </div>
      </div>
    </>
  );
}

关键修改说明 #

• 用w-full替代w-screen：让元素继承父容器（main）的宽度，避免视口宽度计算偏差导致的溢出；
• 给父div添加relative：让绝对定位的切换按钮相对于父元素定位，而非整个文档；
• 修正items为items-center：让flex布局正确垂直居中，避免高度异常；
• 根元素添加overflow-x-hidden：强制隐藏水平溢出，消除不必要的滚动条；
• 重置m-0 p-0：清除浏览器默认的边距，确保布局从视口边缘开始。

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