flex布局是真的好用，补齐边边角角，甚至是各种东西居中都是很好的解决方案

运行环境 Runtime environment

1
2
3
4
5
操作系统 ： Windows10
IDE: JetBrains WebStorm 2020.2.4 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
VueCli : 3
Element-ui ： 2.13.1

背景

Element-ui 用起来是开心！快乐写页面的时候，出现没撑满的问题。

如果碰到那个屏幕高度高的，下面就一片白花花了。

网上有很多其他的解决方案，我认为flex布局是最终极的办法。

前端代码

在 https://codepen.io/pen/ 上做演示

html code 如下：

1
2
3
4
5
6
7
8
9
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>
</div>

CSS code 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

JS code 如下：(引入vue的基本操作,使用脚手架的这个js码可以略过)

1
new Vue().$mount('#app')

代码修改

修改 html code 如下：(使用VueCli的话上面script标签的引入可以省去，改用tamplate标签框起来)

1
2
3
4
5
6
7
8
9
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-container>
  <el-header>Header</el-header>
  <el-main>Main 我撑满了！</el-main>
  <el-footer>Footer</el-footer>
</el-container>
</div>

CSS code 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

#app {
    display: flex;
    height: 100vh;
    flex-direction: column;
  }
    
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

修改后的效果，如下：

总结

1
2
3
4
5
父级盒子(#app)使用flex布局
必须要设置：display: flex;  flex-direction: column;
高度也必须设置：height: 100vh;（注意不是100%）

即可达到中间主体部分 el-main 标签撑满屏幕高度的目的