如何让侧面填充整个可用高度。

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;
}

没有得到我想要的东西，我的侧边栏比滚动的可用空间大，超过的高度是我的页眉和页脚的高度。

我也尝试过使用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;

}