0

Having a terrible time trying to get react to render my page correctly

I have this

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <Router />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
)

in my index.html I have

html, body, #root, #root>div {
  height: 100%;
  overflow: hidden;
}

inside router I have

            <>
                <GlobalStyle />
                <Nav/>
                <div>
                    <Router>
                        <Route component={Home} path="/" />
                    </Router>
                </div>
            </>

I want to display my nav on the top and then the components underneath to take up the rest of the screen space but NOT overflow and render a scroll. but whatever I try and do anything I cant seem to display both

I've tried adding a fixed height to the nav bar. height: 100px !important which works well for the navbar but then the rest of the content is about 60% of the page and there is an annoying div called. <div tabindex="-1" style="outline: none"> which doesn't appear in my code anywhere. I think an accessibility thing? but when I set that to 100% and my container div below it to 100%, then it seems to work. however I cant set that to be 100% in my code so I'm left confused

I also assumed the code I set in the html would cascade down, so I'm confused why it's not cascading to this div? I wonder if setting the navbar is causing this?

anyway, all I want is a page that takes up the whole screen. but also renders a nav bar for 100px or so

any ideas?

Red Baron
  • 7,181
  • 10
  • 39
  • 86
  • Questions seeking code help must include the **shortest code** necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D May 12 '20 at 09:45
  • 1
    when nav is 100px so you should set div height to `calc(100vh - 100px)` – Hamid Sarani May 12 '20 at 10:02

2 Answers2

0

You can use flex.

You can use the following css respectively:

For Parent component => 

display: flex, flex-direction: column;

For Nav component => 

height: 100px

For Sibling components =>

flex-grow: 1
anurag
  • 2,176
  • 2
  • 22
  • 41
vovecode
  • 1
  • 1
-1

you should use this css code:

html, body, #root, #root>div {
  height: 100vh;
  overflow: hidden;
}
Hamid Sarani
  • 755
  • 1
  • 5
  • 15