移动端 fixed 固定按钮在屏幕下方,然后按钮被键…
2018-06-24 02:15:37来源:未知 阅读 ()
在移动端 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.clientHeight var view = document.getElementById('view')
view.style.height = load + 'px'
}
我们想要的效果如下图:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 取消a标签在移动端点击时的背景颜色 2020-03-19
- 移动端性能优化(HTML性能优化) 2020-03-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash