如何css样式设置,才能解决展开收起侧边栏时,页面内容不会超前伸?
layout布局
<div class="layout">
<div class="menu">
<Menu :isCollapse="isCollapse"></Menu>
</div>
<div class="content" :class="{ active: isCollapse }">
<Content @changeMenu="changeMenu" :isCollapse="isCollapse" />
</div>
</div>
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 布局
<div class="container">
<div class="header">
<div class="icon">
<i v-if="!isCollapse" @click="changeMenu" class="el-icon-s-fold"></i>
<i v-else @click="changeMenu" class="el-icon-s-unfold"></i>
</div>
<div class="header-right">
<span>{{ nowTime }}</span>
<span class="line">|</span>
<span class="exit" @click="logout">
<i class="el-icon-switch-button"></i>
</span>
</div>
</div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
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;
}
}
}
}
回复
1个回答
test
2024-06-26
.menu
设置了fixed
,这样会脱离文档流,也就是.content
排版的时候不会考虑.menu
占用的空间。
- 可以考虑使用 AI 的建议:给
.content
设置padding-left
来留出.menu
的空间; - 也可以在
.layout
上使用弹性布局,让.menu
和.content
各自占据所需空间。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容