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

作者站长头像
站长
· 阅读数 8

如何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个回答
avatar
test
2024-06-26

.menu设置了fixed,这样会脱离文档流,也就是.content排版的时候不会考虑.menu占用的空间。

  • 可以考虑使用 AI 的建议:给.content设置padding-left来留出.menu的空间;
  • 也可以在.layout上使用弹性布局,让.menu.content各自占据所需空间。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容