javascripthtmlcssreactjsscroll

In react, even before adding any div, my html body size is bigger than screen size and is causing unnecessary scrolling

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!

Solution

  • Setting the body height to 100vh and width to 100vw should fix the problem. Since that is not working, maybe one of these points are the reason:

    1. If you have more CSS that you did not post, make sure there is no other stylization messing up sizes (like the height of an element being set to 200% by mistake, e.g.).

    2. Make sure you are not altering sizes through scripts.

    3. To style the body you don't need to select html > body. Just body is enough. But I don't really think that would mess up the styling because body is, in fact, a child of html.

    4. In react, usually you have two CSS files: index.css and App.css. The index.css is for the index.html file, this means: it serves to style elements that should always stay the same, like the body for example. The App.css is for specific component stylization. On App.js you always import the App.css, not the index.css. You also don't need to link the index.css file in the index.html (if I am not mistaken the index.js file is responsible for that). Try to fix those and see if it changes anything.

    These are the only things I can suggest. I am not very confident they will actually be the solution but maybe they will guide you somehow. Good luck :)

    PS: My last suggestion comes 100% from personal experience. I always use React through CRA. I don't know if you have different file setups when you use another build tool. If that is the case, discard that topic.