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

Question

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

折叠之后：

会有白边产生。

白边：

主内容区容器为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;}

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

#cesiumContainer {  flex: 1;  height: 100%;  width: 101%;  padding: 0px;  margin: 0px;}

Answer 1

弹性很好解决啊，需要撑满的那部分容器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>

Answer 2

这个问题似乎是 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;}

2. 使用 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 中侧边栏折叠时主内容区子组件无法自动占满父容器的问题。你可以尝试使用其中一种方法，看看哪种更适合你的情况。