解决移动端两端布局的input+fixed的bug

简介:

在移动端布局中,会经常出现固定在手机上下两端的页面。

但是fixed定位和软键盘碰上之后,会碰到各种的坑,ios和android上都会遇到。

下面就分享一下如何解决此问题,代码实例如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" >
< title >蚂蚁部落</ title >
</ head >
< body >
   < div class = "main" >
     < p >可以用手机看看</ p >
     < p >test</ p >
     < p >软键盘出来后</ p >
     < p >test</ p >
     < p >foot是否会错位~</ p >
     < p >test</ p >
     < p >test</ p >
     < input type = "text" placeholder = "我是一个输入框" >
     < input type = "text" placeholder = "用手机点我啊" >
   </ div >
   < div class = "foot" >
     copyright by linyang
   </ div >
</ body >
</ html >



原文发布时间为:2017-2-23

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:解决移动端两端布局的input+fixed的bug

相关文章
|
8月前
|
小程序 前端开发
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
8月前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
543 1
Cocos Creator3.8 项目实战(三)去除scrollview背景色和label 对齐方式设置无效问题解决
Cocos Creator3.8 项目实战(三)去除scrollview背景色和label 对齐方式设置无效问题解决
155 0
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
使用bootstrap-table时数据列过多,又想某列特殊显示?推荐你使用bootstrap-table-fixed-columns来解决吧!使用时需要注意 bootstrap-table和bootstrap-table-fixed-columns尽量保持一致,以防奇怪问题出现
928 0
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
解决手机端中overflow: auto引起的内容滑动卡顿问题
解决手机端中overflow: auto引起的内容滑动卡顿问题
241 0
|
前端开发 调度 Android开发
从显示 Tap 位置的原理窥探 Android Input 系统
从显示 Tap 位置的原理窥探 Android Input 系统
从显示 Tap 位置的原理窥探 Android Input 系统
|
图形学
Unity 【Content Size Fitter】- 聊天气泡自动适配Text文本框大小
Unity 【Content Size Fitter】- 聊天气泡自动适配Text文本框大小
563 1
|
前端开发 JavaScript
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
|
前端开发
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置