vue-cli中圣杯布局失效问题

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

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

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

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'app'

}

</script>

<style>

  #app{

    width: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>

　　这样就可以完美解决。