React项目未添加Div却出现页面滚动异常问题求助

作为React新手，练习制作聊天UI时遇到问题——还未添加任何Div元素，HTML的body尺寸就超出屏幕大小，出现无滚动条却能滚动的情况。已确认Hud、Top_bar和Chat组件无对应CSS文件，不会引发异常。

相关代码： #

HTML代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale= 1.0" />
    <title>Nothing</title>
  </head>
  <body>
    Hello
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

React组件代码：

import './index.css';
import Hud from './hud.jsx';
import Top_bar from './top_bar.jsx';
import Chat from './chat.jsx';

function App() {
  return (
    <div id="main_body">
      <div id="main">
        <div id="hud"><Hud /></div>
        <div id="top_bar"><Top_bar /></div>
        <div id="chat"><Chat /></div>
      </div>
    </div>
  )
}

export default App;

CSS代码：

html body{
  width: 95vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  background-color: red;
}

/* #root{
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* #main_body{
  width: 40%;
  height: 95%;
  background-color: yellow;
} */

解决方案： #

问题原因：

当前CSS仅针对html body设置样式，但浏览器默认会给html元素保留默认边距，同时body的width:95vw加上潜在的默认样式影响，导致整体宽度超出视口，引发无滚动条却能滚动的异常。

修复步骤：

1. 同时重置html和body的默认样式，彻底清除额外的margin和padding
2. 调整宽度配置，或通过box-sizing确保元素尺寸不会溢出视口

修改后的CSS代码：

/* 同时重置html和body的默认样式 */
html, body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: red;
  overflow: hidden; /* 可选：直接禁止溢出滚动，消除无滚动条的滚动行为 */
}

/* 如果需要保留95vw宽度并水平居中，可使用以下代码： */
/* html, body {
  box-sizing: border-box;
  width: 95vw;
  height: 100vh;
  padding: 0;
  margin: 0 auto; /* 水平居中 */
  background-color: red;
} */

说明：

• 使用html, body选择器同时重置，彻底清除浏览器默认边距样式
• box-sizing: border-box可确保后续添加的padding或border不会额外增加元素宽度，避免溢出
• overflow: hidden直接禁止视口外内容滚动，解决无滚动条却能滚动的问题；若需保留垂直滚动，可单独设置overflow-x: hidden禁止水平滚动

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