Struggling to properly render my React page
This is what I have:
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<Router />
</Provider>
</React.StrictMode>,
document.getElementById('root'),
)
In my index.html file, I include the following:
html, body, #root, #root>div {
height: 100%;
overflow: hidden;
}
Within the router component:
<>
<GlobalStyle />
<Nav/>
<div>
<Router>
<Route component={Home} path="/" />
</Router>
</div>
</>
The goal is to display a nav bar at the top and have the components below fill up the remaining screen space without overflowing. However, every attempt ends in failure.
I've experimented with setting a fixed height for the nav bar (height: 100px !important), which works but causes other layout issues. A mysterious div called
<div tabindex="-1" style="outline: none">I expected the CSS code in the HTML file to cascade down, so it's puzzling why it isn't affecting this particular div. Could the navbar styling be interfering?
In the end, all I want is a full-screen page with a 100px navbar. Any thoughts on how to achieve this?