解决使用React+Antd时,内容区高度撑开页面滚动条导致侧边栏高度不够的问题

目录

问题描述:               

解决:

   2.   (推荐)  给内容区设置最大高度，然后超出部分自己会撑开内容区自己的滚动条,不会影响整个页面。

问题描述:               

                           当我们把侧边栏的高度设为   100vh-顶部导航栏的高度    后

如果内容区高度大于视窗高度,就会撑开整个页面的滚动条,

滚动到最底部时就会导致侧边栏的高度不够，显示出布局背景的颜色。

解决:

   1.    把布局背景的颜色改为侧边栏的背景颜色,可以解决问题但并不推荐这样做。

   2.   (推荐)  给内容区设置最大高度，然后超出部分自己会撑开内容区自己的滚动条， 不会影响整个页面。

          给内容区的<content></content>  标签加入以下行内样式

maxHeight:'calc(100vh - 64px)',
overflow: 'auto'

          这是整个页面的布局

             <Layout>
                <Header style={{ padding: 0 }}><Topbar /></Header>
                <Layout>
                    <Sider width={200}><Sidemenu /></Sider>
                    <Layout>
                        <Content style={{
                            padding: 15,
                            margin: 0,
                            maxHeight:'calc(100vh - 64px)',
                            overflow: 'auto'
                        }}>
                            <Outlet></Outlet>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>

        修改前：

       修改后:

 

可以看出，滚动条没有超过内容区，问题解决。