在不使用100vh的情况下将div强制设为完整页面高度

Question

This is a simplified HTML & CSS code to what I currently have in project. Essentially since I'm using ReactJS & routes, I can't wrap everything inside another container with a css grid so I'm looking for solutions to get full page height on both the 'sidebar' & 'content' classes.

I do understand that I could use 100vh and substract from that the height of the header but in this case the header doesn't have a fixed height so I'm looking for alternatives.

 .header { display: grid; grid-template-columns: auto auto; background-color: lightblue; } .main { display: grid; grid-template-columns: 0.2fr 1fr; } .sidebar { background-color: lightpink; height: 100%; } .content { background-color: orange; height: 100%; } 

 <div class="header"> <div> One </div> <div> Two </div> </div> <div class="main"> <div class="sidebar"> Menu </div> <div class="content"> Content </div> </div> 

http://jsfiddle.net/de5ut6np/39/

Answer 1

You can consider the body as the main container:

 html { height:100%; } body { margin:0; height:100%; display: grid; grid-template-rows: max-content 1fr; } .header { display: grid; grid-template-columns: auto auto; background-color: lightblue; } .main { display: grid; grid-template-columns: 0.2fr 1fr; } .sidebar { background-color: lightpink; height: 100%; } .content { background-color: orange; height: 100%; } 

 <div class="header"> <div> One<br> more </div> <div> Two </div> </div> <div class="main"> <div class="sidebar"> Menu </div> <div class="content"> Content </div> </div> 

Answer 2

I tested like this and it worked:

 html { height:100%; } body { margin: 0; height:100%; display: grid; grid-template-rows: max-content 1fr; } .header { display: grid; grid-template-columns: auto auto; background-color: lightblue; } .main { display: grid; grid-template-columns: 0.2fr 1fr; } .sidebar { display: grid; background-color: lightpink; } .content { display: grid; background-color: orange; } 

 <div class="header"> <div> One </div> <div> Two </div> </div> <div class="main"> <div class="sidebar"> Menu </div> <div class="content"> Content </div> </div>