在移动端布局中,会经常出现固定在手机上下两端的页面。
但是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
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落