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

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

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

解决方案:

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

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

css

body,html {
    height       : 100%;
}
#view {
    width        : 100%;
    height       : 100%;
    position     : relative;
}
.watch {
    width        : 96% ;
    height       : 30px;
    padding      : 0 2%;
    border       : 1px solid #00a5ba;
    outline      : none;
    border-radius: 4px ;
    overflow-y   : auto;
}
.fixed-btn {
    width        : 92% ;
    height       : 40px;
    background   : #00a5ba;
    border-radius: 4px ;
    /*position     : fixed;*/
    position     : absolute;
    bottom       : 20px;
    left         : 4%  ;
}

html

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

js

var load = document.body.clientHeight
var view = document.getElementById(‘view‘)

window.onload = function () {
    view.style.height = load + ‘px‘
}

我们想要的效果如下图:

原文地址:https://www.cnblogs.com/design-pillar/p/8444738.html

时间: 2024-10-10 16:25:38

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

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

/********************************************************************* * 将HTML的页脚固定在屏幕下方 * 说明: * 处理的方法好像是比较多的,个人还是比较倾向于用JS进行处理. * * 2017-8-25 深圳 龙华樟坑村 曾剑锋 ********************************************************************/ 一.参考文档: 1. 将footer固定在页面底部

移动端输入框固定在底部键盘抬起时遮挡住输入框

移动端开发时输入框使用fixed固定在底部时,抬起键盘会遮挡住输入框 监听输入框获得焦点 $(function(){ $("#pinglun").focus(function(){           //输入框获得焦点 var tHeight = $(document).height();     //获取当前屏幕高度,没用到 console.log('当前屏幕高度='+tHeight) console.log('输入框获得焦点') document.getElementById(&

移动端webapp如何应对不同屏幕尺寸(转)

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels:浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这不

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

工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器.UC浏览器.360浏览器(这几个是ios最容易出问题的浏览器): 问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验 下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨! 方法一: 给body设置高度100% body,html

解决 IE6 position:fixed 固定定位问题

实现<div id="ad"></div>固定在窗口左下角 一般的 position:fixed; 实现方法#ad{ position:fixed; bottom:0; left:0px;} 在 IE6 中实现 position:fixed; 的办法#ad{ position:fixed; bottom:0; left:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.doc

初识安卓小程序(点击按钮切换屏幕颜色)

如图,点击按钮就会切换屏幕的颜色 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"world",当然,也可以别的名称 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="htt

XSuperMES移动端运用FragmentActivity适配大屏幕(一)

XSuperMES移动端运用FragmentActivity适配大屏幕 XSuperMES移动端运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套app,然后拷贝一份,修改布局以适应什么超级大屏的.难道无法做到一个app可以同时适应手机和平板吗?答案是,当然有,那就是Fragment.Fragment出现的初衷就是为了解决这样的问题. 你可以把Fragment当成Activity一个界面的一部分,甚至Activity的界面由完全不

Fixed固定位置的悬浮div层

固定位置的Js悬浮窗口,为了便于查看效果,测试时用随机函数产生一定的内容,与浮动窗口的控制无关,不想用可以去掉.代码内有注释. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

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

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子