전체 높이를 채운 사이다를 얻는 방법.

Question

나는 React 기반의 응용 프로그램을 시작했고 앤트 - 디자인에 기본 navbar, sidebar, footer 및 content area가있는 기본 레이아웃을 가지고 있습니다. 내 코드는 다음과 같습니다.

<Layout> 
      <Header> 
       <TopNavBar/> 
      </Header> 
      <Layout> 
       <Sider className='sider'> 
        <div > 
         side nav 

        </div> 
       </Sider> 
       <Content>main content</Content> 

       </Layout> 
      <Footer>Footer</Footer> 
     </Layout> 

나는 내 SIDER에 다음 CCSS 클래스를 추가하려고

채우기 사이드 바 전체 사용 가능한 페이지의 높이, 아래의 표현과 유사한 결과를 얻을 할

.sider { 
    min-height: 100vh; 
    position: relative; 
    z-index: 10; 
} 

내 사이드 ​​바는 스크롤 할 수있는 사용 가능한 공간보다 커야합니다. 초과하는 높이는 내 높이의 높이입니다. eader와 footer.

나는 또한 flexbox로 시도했지만 성공하지 못했다면 원하는 결과를 얻을 수있는 깨끗한 방법이 있습니까? 나는 자바 스크립트를 사용하여 사용 가능한 높이를 계산하고 CSS 클래스를 설정한다고 생각했습니다.

Answer 1

이 코드

.menu-style { 
overflow: auto; 
height: 100vh; 
width: 200px; 
position: fixed; 
left: 0; 
background-color: #393f4a; 
z-index: 3 ; 
border-right : 0; 

}

을 시도 할 수 있습니다