Element Plus侧边栏折叠时,主内容区的子组件如何自动占满父容器?-灵析社区

周舟莫UI设计

element-plus侧边栏折叠时,右边主内容区的子组件无法自动占满父容器 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241106/8e32545d911ffd7caf759453188b5ce4.png) 折叠之后: ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241106/ffa66d971f78a5f6552acd6f0fe95ade.png) 会有白边产生。 白边: ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241106/8cc03a1c4c08433f85c77b43169f217d.png) 主内容区容器为el-main //主要内容区 ** ** #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%; } //我想用cesiumContainer将主要内容区占满,剩余的主要是反馈组件,并不会有影响! #cesiumContainer { flex: 1; height: 100%; width: 100%; padding: 0px; margin: 0px; } ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241106/d0e72e6c4102ce68dfe02059361b02a8.png) 尝试 将width设置为101%,可以自动充满,但感觉这方法不正经,想看一下大佬们一般怎么解决的 #cesiumContainer { flex: 1; height: 100%; width: 101%; padding: 0px; margin: 0px; }

阅读量:14

点赞量:0

问AI
弹性很好解决啊,需要撑满的那部分容器flex: 1就行了 //主要内容区 ** **