普定县建设局网站,成都定制网站建设地址,国家重大新闻,蓝科企业网站系统在移动端 H5 页面开发中#xff0c;我使用了 fixed 固定某个元素在屏幕的最下方#xff0c;
这时点击输入框#xff0c;接着非常非常自然地出现了元素被系统键盘顶起来的情况#xff0c;如下图。 解决方案:
首先#xff0c;给页面最外层包裹一层 div(相对定位) #xf…在移动端 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 idviewinput typetext classwatchdiv classfixed-btn/div
/div js window.onload function () { var load document.body.clientHeightvar view document.getElementById(view) view.style.height load px } 我们想要的效果如下图:
