关于移动端position:fixedbug的解决方法

原因：移动端手机激活软键盘，fixed定位会出现元素位置漂移

解决办法：头部底部使用fixed定位，中间正文部分使用absolute，并设置top值和bottom值为顶部底部的高度。

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="renderer" content="webkit">
<style type="text/css">
html{font-size: 40px;}
body{position: absolute;left: 0;width: 100%;height: 100%;overflow-x:hidden;margin: 0;font-size: .34rem;text-align: center;line-height: 3rem;color: #fff;}
.head,.footer{position: fixed;left: 0;background: #4d406b;height: .9rem;width: 100%;}
.head{top: 0;}
.content{position: absolute;left: 0;top: .9rem;bottom:.9rem;overflow-y:scroll;width: 100%;background-color: blue;}
.footer{bottom: 0;}
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
    我是正文<br>我是正文<br>我是正文<br>我是正文<br>我是正文<br>我是正文<br>我是正文<br>我是正文<br>我是正文<br>
</div>
<div class="footer"></div>
</body>

</html>

时间： 2024-10-13 12:23:23

关于移动端position:fixedbug的解决方法的相关文章

[JavaEE]Get请求URI中带的中文参数在服务端乱码问题的解决方法

在Get请求中,如果请求参数中带有中文,如 http://localhost:8080/DinnerParty/shop/search?query=多伦多, 在服务端拿到的是乱码. 这是因为客户端提交过去的是UTF-8编码的数据,而服务端解析URi时可能使用的是 iso8859-1编码. 修改tomcat配置文件server.xml <Connector port="8080" protocol="HTTP/1.1" connect

移动端横向溢出隐藏解决方法

今天制作网站自适应中,遇到一个问题:如果使用定位居中法, 在电脑端设置溢出隐藏起作用, 而在移动端中,右边溢出却可以向右滑动. 具体代码如下: body { overflow-x:hidden; } .box { position:absolute; left:50%; width:500px; height:200px; background:red; margin-left:-250px; text-align:center; } 右边溢出部分在移动端设备中,可向右滑动.查找了相关资料,最后

Lodop条形码竖条和值右端不对齐的解决方法

当Lodop条形码设置的宽度比较短,数值比较多的时候,会出现条码的竖条和右端不对齐.个人测试了一下,发现解决办法有三种:1.增加条形码的宽度.2.隐藏条码本身的值,用text文本代替.3.修改条形码下方数值的大小.默认的数值文字大小是9,缩小后可以显示在条码下方,和右端对齐,就是文字会比较小,比较条码本身设置的比较小.测试代码: <head> <meta http-equiv="Content-Type" content="text/html; charse

移动端网页开发的一些解决方法【转】

网上看到一片好文,转载保留高性能 CSS3 动画尽可能的让动画元素不在文档流中,以减少重排 position: fixed; position: absolute; 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [160 nan]解决方法

1 2014-06-11 15:19:17.167 ***[930:707] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [160 nan]' 2 *** Call stack at first throw: 3 ( 4 0 CoreFoundation 0x3365d64f __exceptionPreprocess