需求:当页面高度不足一屏时需要footer固定显示在页面底部,而页面内容超过一屏时需要footer紧跟在页面内容的最后。

思路:通过获取 网页可见区域高度:document.body.clientHeight;设置内容区域的最小高度,从而曲线救国使footer置底。

代码:

<template>
<div id="app">
<Header></Header>
<div id="v-content" v-bind:style="{minHeight: Height+'px'}"><router-view /></div>
<Footer></Footer>
</div>
</template> <script>
export default {
name: 'App',
data() {
return {
Height: 0
}
},
mounted(){
//动态设置内容高度 让footer始终居底 header+footer的高度是100
this.Height = document.documentElement.clientHeight - 100;
  //监听浏览器窗口变化 
window.onresize = ()=> {this.Height = document.documentElement.clientHeight -100}
}
}
</script>
05-11 15:26
查看更多