如何獲得sider填充整個可用高度。

Question

我開始基於React的應用程序，我有一個螞蟻設計基本佈局與頂部的導航欄，邊欄，頁腳和內容區域，我的代碼如下。

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

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

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

我想類似下面的表示結果，與側邊欄誰填滿整個可用頁面高度

我想下面的CCS類添加到我的代爾

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

沒有得到我想要的，我的邊欄比可用空間大滾動，超過的高度是我的高度h eader和頁腳。

我也試過用flexbox但沒有成功，有什麼乾淨的方法來獲得所需的結果？我想用javascript來計算可用高度並設置CSS類。

Answer 1

你可以試試這個代碼

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

}