在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>无标题文档</title>
</head>
<style>
header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
/ main绝对定位，进行内部滚动 /
position: absolute;
top: 50px;
bottom: 34px;
/ 使之可以滚动 /
overflow-y: scroll;
width:300px;
border:#3299D3 5px solid; / main区分 /
}

main .content {
height: 2000px;
border:#A45052 5px solid;/ .content区分 /
width:90px;
}
</style>
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>

</header>

<!-- 可以滚动的区域 -->

<main>

    <div class="content">

           <input type="text" placeholder="Footer..."/>

    <!-- 测试看看... -->

    </div>

</main>

<!-- fixed定位的底部 -->

<footer>

    <input type="text" placeholder="Footer..."/>

    <button class="submit">提交</button>

</footer>

</body>
</html>
在android中 overflow-y: scroll的导航框可能会显示不出来(可能是部分吧!没有测试过,我的手机是显示不出来),但是它确实是存在的

作者：
链接：https://www.imooc.com/article/5969
来源：慕课网

关于苹果手机微信端 position: fixed定位top导航栏问题的更多相关文章

  1. 唤醒键盘时取消对特定类的position:fixed定位

    /* 唤起键盘时取消对特定类的position:fixed定位 */ var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/ $(window).r ...

  2. 通过 position:fixed 实现底部导航

    通过 position:fixed 实现底部导航 HTML <div id="footer">页脚</div> CSS #footer { clear: b ...

  3. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

  4. uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据

    h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...

  5. 安卓手机微信页面position: fixed位置错误

    今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样 ...

  6. iphone手机微信端html5 Geolocation定位失效的问题

    使用Geolocation方法存在错误信息error.POSITION_UNAVAILABLE 其实问题不局限于微信端而是iphone升级到ios10后,对获取地理位置信息作出了限制,只有https的 ...

  7. ie7中position:fixed定位后导致margin:0 auto;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  8. 移动端position:fixed 解决方案

    相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...

  9. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

随机推荐

  1. 常见IT工具软件总结

    1. 阿里云在线迁移服务 2.智能媒体管理 格式转换 业务域名管理 1. 每个业务有一个英文单词, 1. 每个 git 的命名应该是 chgg-业务英文-种类 2. 例如 chgg-plant-api ...

  2. 实用的几个JS新特性(es 2016)

    在Chrome 55下测试,可用. 1.箭头函数(arrow function) 以前写的匿名函数是这样的 function(){}, 现在可以简单写成这样()=>{} 如果直接return,没 ...

  3. Spring4 MVC Hibernate4 maven集成

    http://www.cnblogs.com/leiOOlei/p/3727859.html

  4. SQL 函数NULLIF、NULL、ISNULL、COALESCE、IIF

    NULLIF函数 NULLIF(Expression1,Expression2):给定两个参数Expression1和Expression2,如果两个参数相等,则返回NULL:否则就返回第一个参数. ...

  5. Linux命令替换字符串

    :%s/str1/str2/ 用str2替换str1

  6. JarvisOJ Basic easyRSA

    还记得veryeasy RSA吗?是不是不难?那继续来看看这题吧,这题也不难. 已知一段RSA加密的信息为:0xdc2eeeb2782c且已知加密所用的公钥: (N=322831561921859 e ...

  7. HTML5-Input

    HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证(有的浏览器不支持) color.date.datetime.datetime-local.email.month.number ...

  8. memcached安装报错 error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory解决

    我是从其他服务器scp来的memcached(~~~整个文件夹的那种,windows用多了的后遗症) 在准备运行 ./memcached -d -u root -l localhost -m 800 ...

  9. 向继电器发送socket请求（python+java）

    近日,有一需求,向连接在内网的继电器发送socket请求,加以控制.原本并不复杂,只是io流/socket转换的问题,实操中却出现python代码没问题,java代码执行无响应的问题,问题很好定位:没 ...

  10. Java大数练习

    大数阶乘 题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=28 import java.io.*; import java.util.*; ...