element UI 中间内容自动填充满屏

thinklog2018

于 2021-08-27 21:33:13 发布

阅读量3.1k

点赞数 3

分类专栏：前端文章标签： html html5 css

本文链接：https://blog.csdn.net/thinklog2018/article/details/119960690

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何处理elementUI布局时可能出现的footer悬空问题，通过设置el-container和el-row的样式，确保内容能填充整个屏幕。主要步骤包括调整#app的div元素样式以实现满屏效果，以及设置el-container高度为100%来避免内容区域无法填充满屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element UI 设置容器布局时候比较方便，但如果设置不好会出现中间内容无法填充满整个屏幕剩余空间的问题，很可能会导致footer组件悬空在屏幕中间位置，不美观。根据网络上找到的资料，主要有如下几个步骤：

1. 首先说明下布局： header 、（aside，main) 、footer。中间aside和main在同一水平位置。

<template>
 <el-container>
       <el-header>  head  </el-header>
       <el-container>  
           <el-aside> aside</el-aside>
           <el-main>main</el-main>           
       </el-container>
       <el-footer>footer</el-footer>
  </el-container>
</template>

aside和main要在同一个水平位置，可以使用一个el-container或者一个el-row 都可以。

2. 在App.vue中，对index.html中绑定#app的div元素进行设置，增加一段配置：

position:absolute;
top:0;
right:0;
bottom:0;
left:0;

简单测试可以发下，如果不设置top等，上面布局的元素都会缩在一起，无法实现满屏效果。

3. 在上述布局文件中，设置el-container的样式：

.el-container {   
    height: 100%;    
  }

如果aside 和main的父组件不是container，而是el-row，那么需要额外设置el-row的高度为100%。