How to use bootstrap or css for never appear scrollbar

Question

The question is in the title, on React Application, i want to never see the window scrollbar, i would like to the content never overflowing for each screen size.

      // App.js
      <BrowserRouter>
        <div className="site">
          <Navbar/>
          ...
          // some routes
        </div>
      </BrowserRouter>
      <footer></footer>

      //App.css
     * {
         box-sizing: border-box !important;
     }

    .site {
        height: 100%;
        margin-bottom: -40px;
    }

    footer {
       height:40px;
       background-color:red;
    }

For example, i have a table, if content overflow, only scroll table appear but never this of window.

   <div style={{maxHeight:"70vh", overflowY:"auto"}}>
     <table>
     ...
     </table>
   </div>
```

Answer 1

To solved it, i wrapped my site in a div

// App.js
<div className="site">
  <Navbar/> //navbar component
  <BrowserRouter>
    <Switch> // from react router dom
      <Route/> // some many routes
   ...
</div>

// App.css
.site {
  height:100%
}

And after in component who contain my table

<Container style={{height:"calc(100% - 120px)", display:"flex", flexDirection:"column"}}>
  <div style={{overflowY:"auto"}}>
    <Table>
    ...

I hope so this answer can help another developers