利用可能な高さ全体を満たすサイダーを取得する方法。

Question

私はReactベースのアプリケーションを開始しました。トップナビゲーションバー、サイドバー、フッター、コンテンツエリアを持つ基本的なレイアウトをant-designしています。私のコードは次のとおりです。

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

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

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

私は私が私のサイダー

に次のCCSSクラスを追加しようとした全体の使用可能なページの高さ

を埋めるサイドバーで、以下の表現と同様の結果を取得したいです

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

私のサイドバーは、スクロール可能なスペースよりも大きく、高さは私のhの高さですeaderとフッター。

私もflexboxを試しましたが、成功しなかった場合、望ましい結果を得るためのクリーンな方法がありますか？使用可能な高さを計算し、CSSクラスを設定するためにJavaScriptを使用してこれを行うと考えました。

Answer 1

あなたは

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

}

このコードを試すことができます