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

  • Z时代
  • 2024-02-20
  • 分类：IT

如何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;
        }
      }
    }
  }

回答：

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

  • 可以考虑使用 AI 的建议：给.content设置padding-left来留出.menu的空间；
  • 也可以在.layout上使用弹性布局，让.menu和.content各自占据所需空间。

以上是 如何css样式设置，才能解决展开收起侧边栏时，页面内容不会超前伸？ 的全部内容， 来源链接： utcz.com/p/934998.html

回到顶部