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

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

<div class="dHead list list-purpose dTitle" >
<transition  enter-active-class="animated     zoomInLeft"
leave-active-class="animated zoomInRight">
<span v-show="headtitle">
{{headtitle}}</span>
</transition>
</div>
<div class="content dBody">
<loading></loading>
<p class="mycontent">
中间内容

　
</p>
</div>
<div class="link dFoot list list-purpose">

<span class="urllist"  v-for="(item,index) in urllist"
@click="activtoggle(index);btnbool=!btnbool">
<router-link :to="{name:item.url}":title="item.title"
>
<span  class="iconfont" :class="[{'active':index===active},item.icon]"

></span>
</router-link>
</span>
<div class="both"></div>
</div>
</div>
</template>

<script>
import {arrText} from '@/common/js/variable'
import Loading from 'base/loading'
export default {
name: 'app',
data(){
return{
btnbool:true,
active:0,
headtitle:'首页',
urllist:[
{
url:'/',
title:'首页',
id:'index',
icon:'icon-shouye'
},
{
url:'/infor',
title:'消息',
id:'informat',
icon:'icon-xiaoxi'
},
{
url:'/search',
title:'搜索',
id:'search',
icon:'icon-search_icon'
},
{
url:'/mes',
title:'个人中心',
id:'mes',
icon:'icon-user'
},
]
}
},
components:{
Loading
},
methods:{
activtoggle(index){
this.active=index
this.headtitle=arrText[index]
},
activesty(bool){
bool=!bool
}

}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*text-align: center;*/
/*color: #2c3e50;*/
/*margin-top: 60px;*/
}
html, body,#app {
height:100%;
overflow:hidden
}
.dHead{
z-index:5;
top:0;
}

.dHead .dHead-title span{
position: absolute;
}
.dHead span{
font-size: 14px;
font-weight: 100;
}
.dFoot{
z-index:200;
bottom:0;
}

.dBody {
background:#FC0;
width:100%;
overflow:auto;
top:60px;
position:absolute;
z-index:10;
bottom:60px;
}

.list-purpose{
height:60px;
line-height:60px;
text-align:center;
width:100%;
position:absolute;
}

.mycontent {
padding:20px;
}
.list-purpose span.urllist{
width: 25%;
box-sizing: border-box;
float: left;
}
.list-purpose span.urllist a{
display: block;
}
.list-purpose span.urllist a span.iconfont{
font-size: -webkit-xxx-large;
font-size:xx-large;
}
.both{
display: table;
clear: both;
}

.fade-enter {
opacity:1;
}
.fade-leave{
opacity:0;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}

</style>
<style lang="stylus" rel="stylesheet/stylus">
@import "~css/index.styl"
.dTitle
color $text-color
background-color $background-color
.router-link-active
span.active
color $index-color

</style>