目录
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>
修改前:
修改后:
可以看出,滚动条没有超过内容区,问题解决。