问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Element Plus侧边栏折叠时，主内容区的子组件如何自动占满父容器？

头像
惜风误
    314
    新手上路，请多包涵

    element-plus侧边栏折叠时，右边主内容区的子组件无法自动占满父容器

    折叠之后：
    image.png
    会有白边产生。

    白边：
    image.png
    主内容区容器为el-main

    <template>
  <el-container id="body">
    <el-header class="header" style="background-color: rgb(100, 100, 100)">
      <HeaderMain></HeaderMain>
    </el-header>
    <el-container>
      <el-aside :width="Collapse ? '64px' : '180px'" style="background-color: rgb(100, 100, 100)">
        <AsideMain></AsideMain>
      </el-aside>
      <el-container>

      //主要内容区       
     ** <el-main class="main" style="padding: 0px">
          <router-view v-slot="{ Component }">
            <component :is="Component" class="view" />
          </router-view>
        </el-main>**

        <el-footer class="footer">
          <StatusBar></StatusBar>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
#body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.header{
  margin: 0;
  padding: 0;
  height: 7vh;
  width: 100%;
}

//主要内容区样式
.main{
  display: flex;
  margin: 0;
  padding: 0;
  height: 90vh;
  width: 100%;
}
      <div>
    <div id="cesiumContainer"></div>
    <el-dialog
      v-model="dialogShow"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      class="pointer"
      title="图层管理器"
    >

//我想用cesiumContainer将主要内容区占满，剩余的主要是反馈组件，并不会有影响！
<style scoped>
#cesiumContainer {
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

    image.png
    尝试
    将width设置为101%，可以自动充满，但感觉这方法不正经，想看一下大佬们一般怎么解决的

    #cesiumContainer {
  flex: 1;
  height: 100%;
  width: 101%;
  padding: 0px;
  margin: 0px;
}
    侧边栏折叠
    阅读 1.8k
    avatarAI BotBETA

    这个问题似乎是 Element Plus 框架中的布局问题，当侧边栏折叠时，主内容区的子组件无法自动占满父容器，导致出现白边。

    根据你提供的代码和图片，可以尝试以下方法来解决这个问题：

    1. 使用 CSS Flexbox 布局：将主内容区的子组件的宽度设置为100%，并使用 flex-grow: 1 来使其占满剩余空间。这样可以确保当侧边栏折叠时，主内容区的子组件能够自动占满父容器。
    .main {
  display: flex;
  margin: 0;
  padding: 0;
  height: 90vh;
  width: 100%;
}

#cesiumContainer {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
    1. 使用 CSS Grid 布局：如果以上方法不起作用，可以尝试使用 CSS Grid 布局来解决问题。将父容器设置为 display: grid，并指定主内容区子组件的 grid-column-start 和 grid-column-end 属性为 1，以确保其占满整个列宽。
    .main {
  display: grid;
  grid-template-columns: 1fr;
  height: 90vh;
  width: 100%;
}

#cesiumContainer {
  grid-column-start: 1;
  grid-column-end: 1;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

    以上两种方法都可以用来解决 Element Plus 中侧边栏折叠时主内容区子组件无法自动占满父容器的问题。你可以尝试使用其中一种方法，看看哪种更适合你的情况。

    1 个回答
    得票最新
    头像
    Eraser
      21312
      ✓ 已被采纳

      弹性很好解决啊，需要撑满的那部分容器flex: 1就行了

      <el-container style="display: flex">
      <el-aside :width="Collapse ? '64px' : '180px'" style="background-color: rgb(100, 100, 100)">
        <AsideMain></AsideMain>
      </el-aside>
      <el-container style="flex: 1">

      //主要内容区       
     ** <el-main class="main" style="padding: 0px">
          <router-view v-slot="{ Component }">
            <component :is="Component" class="view" />
          </router-view>
        </el-main>**

        <el-footer class="footer">
          <StatusBar></StatusBar>
        </el-footer>
      </el-container>
    </el-container>
      查看全部 1 个回答