移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~

在移动端 H5 页面开发中，我使用了 fixed 固定某个元素在屏幕的最下方，

这时点击输入框，接着非常非常自然地出现了元素被系统键盘顶起来的情况，如下图。

解决方案:

首先，给页面最外层包裹一层 div(相对定位) ，然后页面渲染完成时给 div 的高度等于 body(document.body.clientHeight) 的高度，

接下来再给需要定位在屏幕下方的元素设置绝对定位即可解决问题。

css

 

body,html {height       : 100%;margin       : 0;padding      : 0;
}
#view {width        : 100%;height       : 100%;position     : relative;text-align   : center;
}
.watch {width        : 98% ;height       : 30px;border       : 1px solid #00a5ba;outline      : none;border-radius: 4px ;
}
.fixed-btn {width        : 100%;height       : 40px;background   : #00a5ba;border-radius: 4px ;position     : absolute;bottom       : 0   ;left         : 0   ;
}

 

html

 

<div id="view"><input type="text" class="watch"><div class="fixed-btn"></div>
</div>

 

js

 

window.onload = function () {

　　var load = document.body.clientHeightvar view = document.getElementById('view')
　　view.style.height = load   'px' 

}

 

我们想要的效果如下图:

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/369677.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

momentum公式

momentum公式

momentum对于w的更新公式&#xff1a; http://caffe.berkeleyvision.org/tutorial/solver.html转载于:https://www.cnblogs.com/ymjyqsx/p/7364743.html
阅读更多...
带弹簧的Hazelcast分布式执行

带弹簧的Hazelcast分布式执行

ExecutorService功能是Java 5附带的&#xff0c;位于java.util.concurrent包中。 它扩展了Executor接口&#xff0c;并提供了线程池功能来执行异步简短任务。 建议使用Java Executor服务类型来查看基本的ExecutorService实现。 此外&#xff0c;ThreadPoolExecutor是ExecutorS…
阅读更多...
Manacher's Algorithm 马拉车算法（最长回文串）

Manacher's Algorithm 马拉车算法（最长回文串）

这个马拉车算法Manacher‘s Algorithm是用来查找一个字符串的最长回文子串的线性方法&#xff0c;由一个叫Manacher的人在1975年发明的&#xff0c;这个方法的最大贡献是在于将时间复杂度提升到了线性&#xff0c;这是非常了不起的。对于回文串想必大家都不陌生&#xff0c;就是…
阅读更多...
java咖啡机故障5_【咖啡小常识】咖啡机不得不知道的常见故障及解决方法

java咖啡机故障5_【咖啡小常识】咖啡机不得不知道的常见故障及解决方法

原标题&#xff1a;【咖啡小常识】咖啡机不得不知道的常见故障及解决方法咖啡行业交流请加私人微信精品咖啡香&#xff0c;微信号&#xff1a;(长按复制)thinkingcapacity一&#xff0e;没有蒸汽或做出的咖啡不热可能原因1、在一个时间段放出了大量的热水(不建议使用咖啡机自带…
阅读更多...
idiom的学习笔记（一）、三栏布局

idiom的学习笔记（一）、三栏布局

三栏布局左右固定&#xff0c;中间自适应是网页中常用到的&#xff0c;实现这种布局的方式有很多种&#xff0c;这里我主要写五种。他们分别是浮动、定位、表格、flexBox、网格。 在这里也感谢一些老师在网上发的免费教程&#xff0c;使我们学习起来更方便&#xff01;&#x…
阅读更多...
USB之HID类Set_Report Request[调试手记1]

USB之HID类Set_Report Request[调试手记1]

请翻开《Device Class Definition for Human Interface Devices (HID) Version 1.11 》7.2.2 Set_Report Request 现在我们先那键盘来做实验来观察。[备注:测试当时NUM指示灯亮] 通过笔记本上按“capslock”按键来观察外置键盘上大小写的指示灯。 通过USBlyzer观察到 发送03的…
阅读更多...
Devoxx 2012：Java 8 Lambda和并行性，第1部分

Devoxx 2012：Java 8 Lambda和并行性，第1部分

总览 Devoxx是世界上最大的独立于供应商的Java会议&#xff0c;于11月12日至16日在比利时的Atwerp举行。 今年规模更大了&#xff0c;来自40个不同国家的3400名与会者。 和去年一样 &#xff0c;我和来自SAP的一小群同事都来了&#xff0c;并享受了很多。 在Nao机器人令人印象…
阅读更多...
python实现微信接口——itchat模块

python实现微信接口——itchat模块

python实现微信接口——itchat模块 安装 sudo pip install itchat 登录 itchat.auto_login() 这种方法将会通过微信扫描二维码登录&#xff0c;但是这种登录的方式确实短时间的登录&#xff0c;并不会保留登录的状态&#xff0c;也就是下次登录时还是需要扫描二维码&#xff0…
阅读更多...
z-index失效的情况

z-index失效的情况

1、父标签 position属性为relative&#xff1b; 2、问题标签无position属性&#xff08;不包括static&#xff09;&#xff1b; 3、问题标签含有浮动(float)属性。 4、问题标签的祖先标签的z-index值比较小 如果这样的话 position只还剩下absolute跟fixed了喔
阅读更多...
前端常见的十七个框架

前端常见的十七个框架

本文作者祈澈姑娘&#xff0c;转载请声明 前端的技术日渐更新&#xff0c;最近得空&#xff0c;花了一上午的时间&#xff0c;将前端常见的框架总结了一下&#xff0c;在开发的过程之中&#xff0c;有了这些&#xff0c;不断能够提高自己的工作效率&#xff0c;还可以在工作之余…
阅读更多...
使用JSF 2.0可以更轻松地进行多字段验证

使用JSF 2.0可以更轻松地进行多字段验证

开发应用程序表单时最常见的需求之一是多字段验证&#xff08;或跨字段验证&#xff0c;但我没有使用此术语&#xff0c;因为当我将其放在Google上时&#xff0c;实际上得到了一些战后图片&#xff09;。 我正在谈论的情况是&#xff0c;我们需要比较初始日期是早于结束日期还是…
阅读更多...
mysql 5.6.34 二进制下载_linux下安装mysql二进制版本(5.6.34)

mysql 5.6.34 二进制下载_linux下安装mysql二进制版本(5.6.34)

我这里下载的是mysql-5.6.34-linux-glibc2.5-x86_64.tar.gz1.创建mysql用户和用户组#groupadd mysql#useradd -g mysql mysql#passwd mysql2.下载解压二进制文件,解压,进入解压出来的文件[roothost01 db]# tar -xvf mysql-5.6.34-linux-glibc2.5-x86_64.tar.gz[roothost01 db]#…
阅读更多...
Cesium调用Geoserver发布的 WMS、WFS服务

Cesium调用Geoserver发布的 WMS、WFS服务

1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装&#xff0c;同时安装geopackage扩展&#xff0c;以备使用。使用XX地图下载器下载地图&#xff0c;导出成GeoPackage地图文件。 &#xff08;1&#xff09;下载 GeoPackage DEM数据 &#xff08;2&#xff09;打开GeoS…
阅读更多...
curl put delete post get请求类型参数

curl put delete post get请求类型参数

curl如何发起DELETE/PUT请求 DELETE: curl_setopt($ch, CURLOPT_CUSTOMREQUEST, DELETE);PUT: curl_setopt($ch, CURLOPT_PUT, true);GET: curl_setopt($ch, CURLOPT_HTTPGET, true);POST: curl_setopt($ch, CURLOPT_POST, true); 转载于:https://www.cnblogs.com/xuhaohao/p/7…
阅读更多...
如何用ThreadLocals射击自己

如何用ThreadLocals射击自己

它将很好地启动。 像大多数故事一样。 您会发现一个新概念&#xff0c;并对其功能感到惊讶。 然后突然装备了这把新锤子&#xff0c;一切开始看起来像钉子。 根据我们过去几个月的经验&#xff0c; java.lang.ThreadLocal真是一锤定音。 我想这全都归结为ThreadLocal的工作原理…
阅读更多...
mysql--------四种索引类型

mysql--------四种索引类型

一、索引的类型 mysql索引的四种类型&#xff1a;主键索引、唯一索引、普通索引和全文索引。通过给字段添加索引可以提高数据的读取速度&#xff0c;提高项目的并发能力和抗压能力。索引优化时mysql中的一种优化方式。索引的作用相当于图书的目录&#xff0c;可以根据目录中的…
阅读更多...
Mysql高级考试题_MySQL高级应用答案试题题目及答案,期末考试题库,章节测验答案...

Mysql高级考试题_MySQL高级应用答案试题题目及答案,期末考试题库,章节测验答案...

MySQL高级应用答案试题题目及答案,期末考试题库,章节测验答案更多相关问题MgSO4&#xff1f;7H2O在医药上常用做泻药&#xff0c;工业上可用氯碱工业中的一次盐泥为原料生产。已知一次盐泥中含有镁、钙、铁、铝、下列实验方案设计正确的是A&#xff0e;分解高锰酸钾制氧气后&am…
阅读更多...
CSS--选择符大全（常用css选择符）

CSS--选择符大全（常用css选择符）

&#xff08;一&#xff09;元素选择符 E&#xff08;某个元素,如p&#xff09;id&#xff08;使用id&#xff0c;如#idName&#xff09;class&#xff08;使用class&#xff0c;如.myclass&#xff09;通配符&#xff1a;* &#xff08;二&#xff09;关系选择符 包含选择符…
阅读更多...
51nod 1384 全排列

51nod 1384 全排列

直接使用STL函数就可以 AC代码&#xff1a; #include<bits/stdc.h>using namespace std;int main(){ char a[100]; int n; while(cin>>a) { int nstrlen(a); sort(a,an); do { cout<<a<<endl; }while(next_permutation(a,an)); } return 0;} 转载于:ht…
阅读更多...
bzoj4709 [Jsoi2011]柠檬

bzoj4709 [Jsoi2011]柠檬

Description Flute很喜欢柠檬。它准备了一串用树枝串起来的贝壳&#xff0c;打算用一种魔法把贝壳变成柠檬。贝壳一共有\(N(1\le N\le 100000)\)只&#xff0c;按顺序串在树枝上。为了方便&#xff0c;我们从左到右给贝壳编号 \(1...N\) 。每只贝壳的大小不一定相同&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023