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:hidden
102 }
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 .dTitle
177   color $text-color
178   background-color $background-color
179 .router-link-active
180   span.active
181     color $index-color
182 
183 
184 </style>