使用Element时的高度问题

使用Element，创建侧边栏时，高度不能和屏幕高度相同。下图是不特殊设置时的效果，高度随ul中的元素而定。

 

app.vue中的代码：html,body,#app和.main必须加style:100%。通过这4个地方，实现将leftNav高度设为100%。

<template>
  <div id="app" >    
    <leftNav></leftNav>
    <div class='main'>
      <router-view/>
    </div>
  </div>
</template>

<script>
import leftNav from '@/components/common/leftNav'
export default {
  name: 'App',
  components:{leftNav}
}
</script>

<style>
 html,body{ height:100%; }   /*必须要加*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height:100%;        /*必须要加*/  
}
.main{
  float:left;
  width:95%;
  background-color:#eff2f7;
  height:100%;         /*必须要加*/  
 } 
</style>

而app.vue中还引入了main，main是有router下的index.js通过路由加载的，这里是加载Pos.vue。以下是Pos.vue的代码：

<template>
  <div class="pos">
    <el-row class='el-row'>
      <el-col :span='7' class='order' style='height:100%;'>
        我是订单栏
      </el-col>
      <el-col :span='17' class='product' style='height:100%;'>
        我是产品栏
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'pos',
  data () {
    return {

    }
  }
}
</script>

<!-- "scoped" 表示仅在局部有效 -->
<style scoped>
  html,body{
     height:100%;
  }
  .pos{
    height:100%;
  }
.el-row{
    height:100%;
  }
  .order{
    background-color:#f9fafc;
    border-right:2px solod #c0ccda;
  }
</style>

最后的效果