1

My markup has the following structure:

<Header/>
<main style={{display: 'flex'}}>
   <div style={{flexGrow: 1}} id='one'>Left Panel</div>
   <div style={{flexGrow: 5}} id='two'>Main Content</div>  
</main>

Do not bother about <Header />. It is a React component that lies at the top of the page and has a certain height (not fixed). What I want is div one to take the entire height of the available viewport; that means 100vh minus the height of the header that we do not know. How is that possible?

Unknown developer
  • 5,414
  • 13
  • 52
  • 100

1 Answers1

0

You can do this with display: flex, height:100vh, flex-flow: column and certainly margin : 0 on the body or parent container of your markup

Mickael
  • 24
  • 2