码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-02-12 18:52:19      阅读:437      评论:0      收藏:0      [点我收藏+]

标签:定位   移动   按钮   需要   .com   固定   fun   ack   mil   

在移动端 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‘
}

 

我们想要的效果如下图:

技术分享图片技术分享图片

 

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

标签:定位   移动   按钮   需要   .com   固定   fun   ack   mil   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!