如何获得sider填充整个可用高度。
问题描述:
我开始基于React的应用程序,我有一个蚂蚁设计基本布局与顶部的导航栏,边栏,页脚和内容区域,我的代码如下。如何获得sider填充整个可用高度。
<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类。
答
你可以试试这个代码
.menu-style {
overflow: auto;
height: 100vh;
width: 200px;
position: fixed;
left: 0;
background-color: #393f4a;
z-index: 3 ;
border-right : 0;
}