需求:当页面高度不足一屏时需要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>

Vue-footer始终置底的更多相关文章

  1. css解决无论页面长短footer永远置底

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

  3. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  4. footer置底

    html代码: <div class="container"> <div cass="header"></div> < ...

  5. jQuery 元素的选中, 置顶、上移、下移、置底、删除

    如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...

  6. js上移、下移、置顶、置底功能实现

    实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...

  7. iOS UILabel 文字 置顶/置底 实现

    iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 ...

  8. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  9. js实现div的置底

    //-------------置底的div---------------------- <div class="mui-content lv-mrcd"  id=" ...

随机推荐

  1. POJ 1330(LCA/倍增法模板)

    链接:http://poj.org/problem?id=1330 题意:q次询问求两个点u,v的LCA 思路:LCA模板题,首先找一下树的根,然后dfs预处理求LCA(u,v) AC代码: #inc ...

  2. 2019-08-01 纪中NOIP模拟B组

    T1 [JZOJ2642] 游戏 题目描述 Alice和Bob在玩一个游戏,游戏是在一个N*N的矩阵上进行的,每个格子上都有一个正整数.当轮到Alice/Bob时,他/她可以选择最后一列或最后一行,并 ...

  3. c#解析json字符串处理

    本文链接:https://blog.csdn.net/sajiazaici/article/details/77647625本文是全网第二简单的方法,因为我女票也发了一篇博客说是全网最简单的方法,我不 ...

  4. HTML的背景

    HTML HTML(超文本标记语言),超文本包括:文字.图片.音频.视频.动画等. W3C(万维网联盟)标准包括: 结构化标准语言(HTML.XML) 1.1. HTML(超文本标记语言):用来显示数 ...

  5. 图的最短路径算法Dijkstra算法模板

    Dijkstra算法:伪代码 //G为图,一般设为全局变量,数组d[u]为原点到达个点的额最短路径, s为起点 Dijkstra(G, d[u], s){ 初始化: for (循环n次){ u = 是 ...

  6. sourcetree(mac)设置代理

    Mercurial: edit ~/.hgrcas shown here: http://www.selenic.com/mercurial/hgrc.5.html#http-proxy Git: e ...

  7. 【正确使用vim编辑器的姿势】

    "vi:可视化接口(Visual Interface) vim:是vi的增强版(vi iMprove) vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中 ...

  8. 对已经存在的没有唯一标识的表添加一个自增的id字段(利用序列sequence)操作过程

    1.原始的数据表 2.操作 -- 创建序列 test_data_file_Id_Seq -- create sequence Test_data_file_Id_Seq increment by 1 ...

  9. python如何用sqlalchemy操作数据库

    工具:mysql  python sqlalchemy ---------------------------------------- 准备工作: 1.安装mysql 如果是window环境请参考 ...

  10. C# virtual 函数

    C# virtual 是虚拟的含义,在 C# 语言中,默认情况下类中的成员都是非虚拟的,通常将类中的成员定义成虚拟的,表示这些成员将会在继承后重写其中的内容. virtual 关键字能修饰方法.属性. ...