css头部和尾部固定，中间可以动态

 ?1 <template> ?2 ??<div id="app"> ?3 ????<router-view/> ?4 ??5 ??????<div class="dHead list list-purpose dTitle" > ?6 ????????<transition ?enter-active-class="animated ????zoomInLeft" ?7 ?????????????????????leave-active-class="animated zoomInRight"> ?8 ????????????<span v-show="headtitle"> ?9 ????????????{{headtitle}}</span> 10 ????????</transition> 11 ??????</div> 12 ????<div class="content dBody"> 13 ??????<loading></loading> 14 ??????<p class="mycontent"> 15 ???????中间内容 16 ?17 ????????　 18 ??????</p> 19 ????</div> 20 ????<div class="link dFoot list list-purpose"> 21 ?22 ??????<span class="urllist" ?v-for="(item,index) in urllist" 23 ????????????@click="activtoggle(index);btnbool=!btnbool"> 24 ????????<router-link :to="{name:item.url}":title="item.title" 25 ????????> 26 ??????????<span ?class="iconfont" :class="[{‘active‘:index===active},item.icon]" 27 ?28 ??????????></span> 29 ????????</router-link> 30 ??????</span> 31 ??????<div class="both"></div> 32 ????</div> 33 ??</div> 34 </template> 35 ?36 <script> 37 ??import {arrText} from ‘@/common/js/variable‘ 38 ??import Loading from ‘base/loading‘ 39 export default { 40 ??name: ‘app‘, 41 ??data(){ 42 ????return{ 43 ??????btnbool:true, 44 ??????active:0, 45 ??????headtitle:‘首页‘, 46 ??????urllist:[ 47 ????????{ 48 ??????????url:‘/‘, 49 ??????????title:‘首页‘, 50 ??????????id:‘index‘, 51 ??????????icon:‘icon-shouye‘ 52 ????????}, 53 ????????{ 54 ??????????url:‘/infor‘, 55 ??????????title:‘消息‘, 56 ??????????id:‘informat‘, 57 ??????????icon:‘icon-xiaoxi‘ 58 ????????}, 59 ????????{ 60 ??????????url:‘/search‘, 61 ??????????title:‘搜索‘, 62 ??????????id:‘search‘, 63 ??????????icon:‘icon-search_icon‘ 64 ????????}, 65 ????????{ 66 ??????????url:‘/mes‘, 67 ??????????title:‘个人中心‘, 68 ??????????id:‘mes‘, 69 ??????????icon:‘icon-user‘ 70 ????????}, 71 ??????] 72 ????} 73 ??}, 74 ??components:{ 75 ????Loading 76 ??}, 77 ??methods:{ 78 ????activtoggle(index){ 79 ??????this.active=index 80 ??????this.headtitle=arrText[index] 81 ????}, 82 ????activesty(bool){ 83 ??????bool=!bool 84 ????} 85 ?86 ??} 87 } 88 </script> 89 ?90 <style> 91 #app { 92 ??font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; 93 ??-webkit-font-smoothing: antialiased; 94 ??-moz-osx-font-smoothing: grayscale; 95 ??/*text-align: center;*/ 96 ??/*color: #2c3e50;*/ 97 ??/*margin-top: 60px;*/ 98 } 99 html, body,#app {100 ??height:100%;101 ??overflow:hidden102 }103 .dHead{104 ??z-index:5;105 ??top:0;106 }107 108 .dHead .dHead-title span{109 ??position: absolute;110 }111 .dHead span{112 ??font-size: 14px;113 ??font-weight: 100;114 }115 .dFoot{116 ??z-index:200;117 ??bottom:0;118 }119 120 .dBody {121 ??background:#FC0;122 ??width:100%;123 ??overflow:auto;124 ??top:60px;125 ??position:absolute;126 ??z-index:10;127 ??bottom:60px;128 }129 130 .list-purpose{131 ??height:60px;132 ??line-height:60px;133 ??text-align:center;134 ??width:100%;135 ??position:absolute;136 }137 138 .mycontent {139 ??padding:20px;140 }141 .list-purpose span.urllist{142 ??width: 25%;143 ???box-sizing: border-box;144 ??float: left;145 }146 .list-purpose span.urllist a{147 ??display: block;148 }149 .list-purpose span.urllist a span.iconfont{150 ??font-size: -webkit-xxx-large;151 ??font-size:xx-large;152 }153 .both{154 ??display: table;155 ??clear: both;156 }157 158 .fade-enter {159 ??opacity:1;160 }161 .fade-leave{162 ??opacity:0;163 }164 .fade-enter-active{165 ??transition:opacity .5s;166 }167 .fade-leave-active{168 ??opacity:0;169 ??transition:opacity .5s;170 }171 172 173 </style>174 <style lang="stylus" rel="stylesheet/stylus">175 @import "~css/index.styl"176 .dTitle177 ??color $text-color178 ??background-color $background-color179 .router-link-active180 ??span.active181 ????color $index-color182 183 184 </style>