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

Question

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

发布于
2023-10-09 江苏

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

前端 vue.js css

阅读 1k

AI BotBETA

要解决展开和收起侧边栏时页面内容不会超前伸的问题，你可以通过调整 CSS 的 padding-left 或者 transform 属性来实现。以下是一个基本的例子，你可以根据你的实际需要进行调整。

.menu {
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  background-color: #112f50;

  /deep/ .el-menu {
    border-right: none;
  }
}

.content {
  transition: all .3s;
}

.active {
  padding-left: 64px;
  transform: translateX(64px); /* 新增的 transform 属性 */
}

在这个例子中，我增加了 .active 类的 transform 属性。默认情况下，内容区域 .content 的左边会留出 200px 的空白，这是由 padding-left: 200px; 这行代码决定的。当你点击菜单图标并且 .active 类被添加到 .content 上时，transform: translateX(64px); 会把内容区域左移 64px，即侧边栏的宽度，避免了页面内容的超前伸展。注意，这个值（64px）应该等于你的侧边栏的宽度。

这样，不论何时侧边栏展开或者收起，页面内容区域都会保持原位，不会超前伸展。

1 个回答

得票最新

知名喷子

6k31731

发布于
2023-10-09 贵州

✓ 已被采纳

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