100vh

RootContainer에서 height를 100vh로 설정하면 죽어도 컨테이너들이 페이지에 맞게 들어가지 않았다. 문제는 애초에 Route상위에 PageWrapper가 100vh와 스크롤이 설정되어 있지 않았다. PageWrapper가 100vh가 아니어서 그 아래요소에서 100vh로 설정해봐야 컨테이너가 화면 100%보다 커져서 아래쪽이 잘려 보이지 않고, 스크롤도 되지 않았다. 그래서 Route 상위의 Container에서 높이와 스크롤을 설정하여 해결하였다.

Route 페이지

 const PageWrapper = styled(Grid)`
	height: calc(100vh - ${calcRem(45)}; // 45는 헤더 높이.  
 ` 

<Container>
  <Header />
  <Grid>
    <Grid>
      <Sidebar />
    </Grid>
    <Grid>
    <PageWrapper>
      <Route path='/class/project' render={() => <ProjectMain />} />
      <Route path='/class/project' component={AnotherPage} />
      </PageWrapper>
    </Grid>
  </Grid>
</Container>

ProjectMain 페이지

<RootContainer 
 direction="column" 
 justify="flex-start" 
 alignItems="flex-start">
 <ProjectCreateCardContainer /> // 헤더 하단의 서브 컨테이너
 <Divider /> // 서브컨테이너들의 디바이더
 <div>
   <GridListContainer> // 하단의 서브 컨테이너
     <ListContainer cols={1} spacing={8}>
     {projectsItems}
     </ListContainer>
   </GridListContainer>
 </div>
</RootContainer>