2017-11-18 146 views
1

我开始基于React的应用程序,我有一个蚂蚁设计基本布局与顶部的导航栏,边栏,页脚和内容区域,我的代码如下。如何获得sider填充整个可用高度。

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

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

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

我想类似下面的表示结果,与侧边栏谁填满整个可用页面高度

enter image description here

我想下面的CCS类添加到我的代尔

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

没有得到我想要的,我的边栏比可用空间大滚动,超过的高度是我的高度h eader和页脚。

我也试过用flexbox但没有成功,有什么干净的方法来获得所需的结果?我想用javascript来计算可用高度并设置CSS类。

回答

0

你可以试试这个代码

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

}