如何css样式设置,才能解决展开收起侧边栏时,页面内容不会超前伸?-灵析社区

Daily毅星

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/c4a115d3a0d906bed0e72e3919dbaa5a.png) layout布局 layout css .menu { height: 100%; left: 0; top: 0; bottom: 0; position: fixed; background-color: #112f50; /deep/ .el-menu { border-right: none; } } .content { padding-left: 200px; transition: all .3s; } .active { padding-left: 64px; } content 布局 {{ nowTime }} | content css .container { background-color: #f5f5f5; .header { background: #242f42; height: 50px; line-height: 50px; width: 100%; .icon { font-size: 30px; float: left; i { font-weight: 500; border-left: 0; color: #ffffff; text-align: center; box-sizing: border-box; outline: 0; cursor: pointer; // transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); padding-left: 12px; } } .header-right { font-size: 12px; text-align: right; padding-right: 20px; .line { font-size: 12px; color: #f5f5f5f5; padding: 10px; } .exit { float: right; position: relative; height: 50px; width: 30px; i { font-size: 18px; top: 50%; transform: translateY(-50%); position: absolute; right: 0; } } } }

阅读量:13

点赞量:0

问AI
".menu"设置了"fixed",这样会脱离文档流,也就是".content"排版的时候不会考虑".menu"占用的空间。 * 可以考虑使用 AI 的建议:给".content"设置"padding-left"来留出".menu"的空间; * 也可以在".layout"上使用弹性布局,让".menu"和".content"各自占据所需空间。