I was thinking of creating a chatting UI as a practice lesson since I am a beginner at React.
<!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>
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;
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;
} */
Unfortunately, just while starting I started facing an issue that the body size of the HTML is bigger than the screen-size and is causing scrolling even without a scrollbar.
Please help me with this, I can assure you that components hud/top_bar and chat are not having any css file, so they are not causing the anomaly.
Thanks!
New contributor
Abhrajit Saha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.