在移动端,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. ECS配置lamp环境

    1.安装apache 1.1 安装apache [root@nmserver-7 ~]# yum install httpd httpd-devel 1.2 启动apache服务 [root@nmse ...

  2. SVG辅助标签

    前面的话 本文将详细介绍SVG辅助标签 超链接 在SVG中,可以使用超链接<a>.超链接可以添加到任意的图形上,类比于热区<area> SVG中的超链接有如下3个常用属性 xl ...

  3. FMC

    FMC (FPGA Mezzanine Card) 编辑 FMC:英文全称,FPGA Mezzanine Card.是一个应用范围.适应环境范围和市场领域范围都很广的通用模块.FMC连接器(FMC C ...

  4. Nginx 优化缓冲区与传输效率

    L:126 这里简单的做个计算 比如 我的服务器带宽是 5M=41943040字节 如果按照公网用PIND的得到延迟结果 icmp_seq=3 ttl=49 time=35.612 ms BDP =  ...

  5. 自己实现strchr函数与strstr函数

    char* my_strchr(char* str, int i) { if (NULL == str) { return NULL; } while ('\0' != *str && ...

  6. Tomcat的四种web应用部署方式详解

    在Tomcat中有四种部署Web应用的方式,简要的概括分别是: (1)利用Tomcat自动部署 (2)利用控制台进行部署 (3)增加自定义的Web部署文件(%Tomcat_Home%\conf\Cat ...

  7. BZOJ3502PA2012Tanie linie&BZOJ2288[POJ Challenge]生日礼物——模拟费用流+链表+堆

    题目描述 n个数字,求不相交的总和最大的最多k个连续子序列. 1<= k<= N<= 1000000. 输入 输出 样例输入 5 2 7 -3 4 -9 5 样例输出 13   根据 ...

  8. 【XSY2744】信仰圣光 分治FFT 多项式exp 容斥原理

    题目描述 有一个\(n\)个元素的置换,你要选择\(k\)个元素,问有多少种方案满足:对于每个轮换,你都选择了其中的一个元素. 对\(998244353\)取模. \(k\leq n\leq 1525 ...

  9. opencv 仿射变换

    import cv2 as cv import numpy as np img = cv.imread('../images/face.jpg') h, w = img.shape[:2] mat_s ...

  10. Hdoj 2109.Fighting for HDU 题解

    Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何,都没关系,下面我继续向大家讲解海东集团的发展情况: 在最初的两年里,HDU发展非常迅速,综合 ...