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>
这样就可以完美解决。