使用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>

最后的效果