vuecli中圣杯布局失效问题

众所周知vue2在前端框架越来越流行，vue-cli这个脚手架工具是我们前端开发必用的，大大的提升了我们的开发效率。当然对于前端小白来说，有些遇到的问题需要和大家分享一下。

移动端页面经常都是需要圣杯布局的，可是当静态页面拆分成组件编译以后，往往圣杯布局会失效，以下 是我的解决思路。

1.首先在App.Vue中设置app的样式

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  #app{
    100%;
    height:100%;
  }
</style>

2.在要设置页面级组件的页面设置如下样式

<template>
    <div class="goodsdetail">
        <goods-detail-header></goods-detail-header>
        <detail-content></detail-content>
        <detail-footer></detail-footer>
    </div>
</template>

<script type="text/ecmascript-6">
    import GoodsDetailHeader from "../components/goodsdetail/GoodsDetailHeader.vue";
    import DetailContent from "../components/goodsdetail/DetailContent.vue";
    import DetailFooter from "../components/goodsdetail/DetailFooter.vue";
    export default {
      components:{
        GoodsDetailHeader,
        DetailContent,
        DetailFooter
      }
    }
</script>

<style scoped >
    html,body{
      height:100%;
    }
    .goodsdetail{
      display: flex;
      height:100%;
      flex-direction: column;
      justify-content: space-between;
    }
</style>

　　这样就可以完美解决。