
如何避免展开收起侧边栏时页面内容超前伸?
在使用侧边栏展开和收起功能时,如果侧边栏脱离文档流,那么当侧边栏收起时,页面内容可能会超前伸。
针对这个问题,可以考虑以下解决方案:
- 使用 css padding 属性
为 .content 元素设置 padding-left 属性,以留出与其相邻的 .menu 元素占据的空间。
.content {
padding-left: 200px;
}- 使用 flexbox 布局
在 .layout 元素上应用 flexbox 布局,让 .menu 和 .content 元素各自占据所需空间。
.layout {
display: flex;
flex-direction: row;
}
.menu {
flex: 0 0 200px;
}
.content {
flex: 1 1 auto;
}










