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

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

解决方案:

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

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

css

body,html {
height : 100%;
margin :;
padding :;
}
#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.clientHeight
  var view = document.getElementById('view')
  view.style.height = load + 'px' }

我们想要的效果如下图:

移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~的更多相关文章

  1. fixed固定时弹窗上的input被软键盘遮住的问题

    <div class="pwhCover"> <div class="pwhCon"> <div class="pwhT ...

  2. 将HTML的页脚固定在屏幕下方

    /********************************************************************* * 将HTML的页脚固定在屏幕下方 * 说明: * 处理的 ...

  3. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  4. Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  5. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  6. win8.1去掉鼠标右键回收站“固定到开始”屏幕的方法

    平台:win8.1 问题:桌面“回收站”右键菜单里有个“固定到开始屏幕”,一不小心就误按,设法删除之. 打开注册表编辑器.在注册表编辑器里面定位到:HKEY_LOCAL_MACHINE\SOFTWAR ...

  7. 移动端fixed的元素抖动的问题

    工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ ...

  8. win10 将任意文件固定到开始屏幕(最佳办法)

      1.情景展示 以.bat文件文件为例,想将其固定到开始屏幕上,但是选中-->右键,却没有固定到开始屏幕选项,如何将其固定到开始屏幕上呢? 2.解决方案 选中你要固定到开始屏幕上的文件--&g ...

  9. fixed固定元素

    1.css <style type="text/css"> .elementFixed{ position: fixed; top:0; } </style> ...

随机推荐

  1. servlet向浏览器输出信息

    package com.aaa.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebS ...

  2. java操作Excel的poi的导出Excel表格

    页面布局 点击导出用户:触发函数,直接访问后台 后台方法如下: public String export()throws Exception{ Connection con=null; try { c ...

  3. TensorFlow的序列模型代码解释(RNN、LSTM)---笔记(16)

    1.学习单步的RNN:RNNCell.BasicRNNCell.BasicLSTMCell.LSTMCell.GRUCell (1)RNNCell 如果要学习TensorFlow中的RNN,第一站应该 ...

  4. 【剑指Offer】2、替换空格

      题目描述:   请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. ...

  5. 【codeforces 793A】Oleg and shares

    [题目链接]:http://codeforces.com/contest/793/problem/A [题意] 每次你可以对1..n中的任意一个数字进行减少k操作; 问你最后可不可能所有的数字都变成一 ...

  6. lucene_06_solr域

    solr域在家目录下面\solr_home\collection1\conf中的schema.xml里面定义. 域必须要先在schema.xml下定义后才能使用. solr在操作Field域时需要在s ...

  7. Orcale用户管理

    类 ------表 对象----行 属性----列 软件开发流程: 需求调研 需求分析 概要分析 详细分析 编码 测试 上线 维护 论坛: 1.注册和登录 2.发帖,回帖(关注,浏览数) 用户:(昵称 ...

  8. Summary of Memory Management Methods

    Summary of Memory Management Methods Table 18-1 summarizes the various memory management methods. If ...

  9. 线上MySQL慢查询现象案例--Impossible WHERE noticed after reading const tables

    前言:2012年的笔记整理而得,发布个人博客,做备忘录使用. 背景:线上慢查询日志监控,得到如下的语句:       发现:select doc_text from t_wiki_doc_text w ...

  10. Eclipse在Project Explorer项目归组及分模块显示

    普通项目: 1.[Package Explorer]->[filter]->[Top Level Elements]->[Working Sets] 2.[Package Explo ...