2020-05-01

Web前端：Vue+ElementUI+flex布局达到高度撑满的办法

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

运行环境 Runtime environment

操作系统 ： 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 如下：

<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 如下：

@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标签框起来)

<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 如下：

@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;
  }

修改后的效果，如下：

总结

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

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

赏

也就放着玩的

扫码打赏，其实感觉也没人会给的。。

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:Web前端：Vue+ElementUI+flex布局达到高度撑满的办法

文章作者:RaXianch

发布时间:2020年05月01日 - 17时41分

最后更新:2020年05月09日 - 18时11分

原始链接:https://blog.raxianch.moe/oldBlog/2020/05/01/Web前端：Vue-ElementUI-flex布局达到高度撑满的办法/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。