如何避免侧边栏展开收起时页面内容超前伸？

如何避免展开收起侧边栏时页面内容超前伸？

在使用侧边栏展开和收起功能时，如果侧边栏脱离文档流，那么当侧边栏收起时，页面内容可能会超前伸。

针对这个问题，可以考虑以下解决方案：

1. 使用 css padding 属性

为 .content 元素设置 padding-left 属性，以留出与其相邻的 .menu 元素占据的空间。

.content {
  padding-left: 200px;
}

2. 使用 flexbox 布局

在 .layout 元素上应用 flexbox 布局，让 .menu 和 .content 元素各自占据所需空间。

.layout {
  display: flex;
  flex-direction: row;
}

.menu {
  flex: 0 0 200px;
}

.content {
  flex: 1 1 auto;
}

以上就是如何避免侧边栏展开收起时页面内容超前伸？的详细内容，更多请关注硕下网其它相关文章！