Vue-footer始终置底
需求:当页面高度不足一屏时需要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始终置底的更多相关文章
- css解决无论页面长短footer永远置底
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底 页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
- CSS五种方式实现 Footer 置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...
- footer置底
html代码: <div class="container"> <div cass="header"></div> < ...
- jQuery 元素的选中, 置顶、上移、下移、置底、删除
如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...
- js上移、下移、置顶、置底功能实现
实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...
- iOS UILabel 文字 置顶/置底 实现
iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 ...
- Vue(四) 内置指令
现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...
- js实现div的置底
//-------------置底的div---------------------- <div class="mui-content lv-mrcd" id=" ...
随机推荐
- mediasoup-demo解析-服务端
1.启动server npm start启动服务,会执行脚本: "start": "DEBUG=${DEBUG:='*mediasoup* *INFO* *WARN* * ...
- Web设计精髓(转)
作者:zhouwenqi 地址:http://www.zhouwenqi.com/blog/board_43.html 这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且 ...
- IntelliJ IDEA 2017.3尚硅谷-----插件的使用
在 IntelliJ IDEA 的安装讲解中我们其实已经知道,IntelliJ IDEA 本身很多功能也都 是通过插件的方式来实现的.官网插件库:https://plugins.jetbrains.c ...
- OWIN时遇到的问题
1.在需要授权时如何获得需要授权的应用clientId? 除了从Request.QueryString("client_id")中获得还有别的方法吗?例如通过OWIN中间件的某个属 ...
- python之路异常
一.基本异常处理 1.基本异常处理 inp=input("请输入内容.:") try: num=int(inp) print(num) except Exception as e: ...
- Oracle存储过程----存储过程执行简单的增删改查
1.存储过程执行增加的sql create or replace procedure test_add(id varchar,name varchar,time varchar,age varchar ...
- Strategic game树形DP解法(Poj1463,Uva1292)
已经写过本题用二分图的做法,见这儿. 本题的图是一棵树,求最小点覆盖也可以用树形DP的做法. 定义状态f[0/1][u]表示以u为根的子树,u选取/不选最少需要选取多少点来覆盖. 显然 f[0][u] ...
- Windows下PHP安装 Imagick 扩展
1.下载拓展下载地址一: http://windows.php.net/downloads/pecl/releases/imagick/下载地址二: https://pecl.php.net/pack ...
- LED Decorative Light Manufacturer - Led Wall Lamp Performance Characteristics
LED Decorative Light Manufacturer introduction: LED wall lamp is a light-emitting diode as a ligh ...
- [RedHat]“is not in the sudoers file”解决方法
当在终端执行sudo命令时,系统提示“luckchengis not in the sudoers file”: $ sudo ls Password: luckcheng is not in the ...