移动端使用页尾文字使用绝对定位遇到input框会飘起来的处理方案
如下版权信息的样式在遇到input框的时候会跟随输入框其后

优雅的解决方式:(定位遇上键盘飘窗解决)
mounted里面写上:
var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;
//console.info("原始窗口的高度"+originalHeight);
window.onresize=function(){
//软键盘弹起与隐藏 都会引起窗口的高度发生变化
var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
//console.info("软键盘弹起后窗口的高度"+resizeHeight);
if(resizeHeight*1<originalHeight*1){ //resizeHeight<originalHeight证明窗口被挤压了
self.showMiddle = false; //元素显示与否
}else{
self.showMiddle = true;
}
}
移动端使用页尾文字使用绝对定位遇到input框会飘起来的处理方案的更多相关文章
- 移动端单页视图库,适用于制作移动Web touchbox
ouchBox 原文:https://github.com/maxzhang/touchbox 移动端单页视图库,适用于制作移动专题 DEMO http://jsbin.com/vatuma/late ...
- Bootstrap之Footer页尾布局(2015年05月28日)
直接上页尾部分的代码: <!--采用container-fluid,使得整个页尾的宽度为100%,并设置它的背景色--><footer class="container-f ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之页头页尾加载
一.引言 实现京东的账户项目,有一个小功能,页头页尾加载.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.实现 原理: 用php文件分别写一个的页头和一个页尾,放在前后两个div里. ...
- Lodop打印表格带页头页尾 自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- 简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾 转载
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- Word页眉实现首页不同、奇偶页不同 、更改页眉横线、页眉文字对齐 -- 视频教程(8)
1. 目标 目标1:实现页眉"首页不同,奇偶页不同" 目标2:更改页眉横线 目标3:页眉文字有三部分:第一部分左对齐,第二部分居中,第三部分右对齐 2. 教程 未完 ...... ...
- DISCUZ论坛添加页头及页尾背景图片的几种方法
先给大家分享页头添加背景图片的两种方法:1. 第一种效果,是给discuz的整体框架添加背景图片,见图示: 添加方法如下:找到你现在使用模板common文件下的header.html文件,在<h ...
随机推荐
- md5 js
js-md5 - npm https://www.npmjs.com/package/js-md5 var rotateLeft = function(lValue, iShiftBits) { re ...
- java语法基础(四)
继承 继承概述 继承是面向对象语言的三大基本特性(封装,继承,多态)之一. 一个类可以继承另外一个类,继承的类称为子类(也可以叫派生类),被继承的类称为父类(或者也叫基类,超类). 通过继承,子类可以 ...
- POJ3164 Command Network —— 最小树形图
题目链接:https://vjudge.net/problem/POJ-3164 Command Network Time Limit: 1000MS Memory Limit: 131072K ...
- YTU 2574: 空白格式化
2574: 空白格式化 时间限制: 1 Sec 内存限制: 128 MB 提交: 233 解决: 118 题目描述 恭喜你进入了蓝桥杯总决赛,本次大赛采用了全自动机器测评系统. 如果你的答案与标准 ...
- 配置RabbitMQ远程访问
本文参考自:http://flashing.iteye.com/blog/1797531 1.如果远程客户端网络状况不是太好,比如adsl什么的,那么一定在客户端打开requstedHeartbeat ...
- 修改phpmyadmin中的默认超时时间
phpmyadmin在使用过程中经常出现"登陆超时(1440秒未活动),请重新登录",很烦 解决方法如下: 第一步: 修改php.ini,找到 session.gc_maxlife ...
- sqlserver2008Mail
use msdb GO DROP PROC MailTim GO CREATE PROC MailTim @Subject NVARCHAR(100),@Body NVARCHAR( ...
- java笔记之线程方式1启动线程
* 需求:我们要实现多线程的程序. * 如何实现呢? * 由于线程是依赖进程而存在的,所以我们应该先创建一个进程出来. * 而进程是由系统创建的,所以我们应该去调用系统功能创建一个进程. * ...
- 开源可扩展的Web视频播放器:Clappr Player
http://www.open-open.com/lib/view/open1417057033846.html http://www.csdn.net/article/2014-11-27/2822 ...
- 重置HTML
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}fieldset ...