Reactjs 如何获得一个侧面填充整个可用高度。

我启动了基于React的应用程序，我用ant设计了一个基本布局，上面有导航栏、边栏、页脚和内容区，我的代码如下

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

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

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

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

我也尝试过flexbox，但没有成功，有什么干净的方法可以得到想要的结果吗？我想使用javascript来计算可用高度并设置CSS类

您可以尝试此代码

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

}您可以尝试此代码

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

}