In my React application, I am trying to ensure that the window scrollbar is never visible and that the content does not overflow on any screen size. Here is an example of how I have structured my code:
// 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 specific elements like a table, I want to make sure that if the content overflows, only the scroll within the table will appear, not the window scrollbar:
<div style={{maxHeight:"70vh", overflowY:"auto"}}>
<table>
...
</table>
</div>