使用element ui 进行快速布局时遇到的一个问题

来源于技术胖的视屏总结
当我们想要在右边实现订单栏的height:100%的效果时，进行如下代码的书写

<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        我是订单栏
      </el-col>
      <el-col :span="15">
        我是产品栏
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Pos',

  data () {
    return {

    }
  }
}
</script>

<style scoped>
  .pos-order{
    background-color:#f9fafc;
    border-right:1px solid #c0ccda;
  }
</style>

得到的却是下面这样的效果，这是element ui组件导致的后果，不过我们可以用js来解决这个问题

<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        我是订单栏
      </el-col>
      <el-col :span="15">
        我是产品栏
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Pos',
  mounted(){
    var orderHeight=document.body.clientHeight;
    document.getElementById('order-list').style.height=orderHeight+'px'
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped>
  .pos-order{
    background-color:#f9fafc;
    border-right:1px solid #c0ccda;
  }
</style>