关于苹果手机微信端 position: fixed定位top导航栏问题

在移动端,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">

<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导航栏问题的更多相关文章

唤醒键盘时取消对特定类的position&colon;fixed定位
/* 唤起键盘时取消对特定类的position:fixed定位 */ var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/ $(window).r ...
通过 position&colon;fixed 实现底部导航
通过 position:fixed 实现底部导航 HTML <div id="footer">页脚</div> CSS #footer { clear: b ...
移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
uni-app h5端跳转到底部导航栏的时候使用方法uni&period;switchTab跳转刷新页面更新数据
h5端的uni-app项目需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据百度的方法如下: uni.switchTab({ url: '/p ...
安卓手机微信页面position&colon; fixed位置错误
今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样 ...
iphone手机微信端html5 Geolocation定位失效的问题
使用Geolocation方法存在错误信息error.POSITION_UNAVAILABLE 其实问题不局限于微信端而是iphone升级到ios10后,对获取地理位置信息作出了限制,只有https的 ...
ie7中position&colon;fixed定位后导致margin&colon;0 auto&semi;无效
布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...
解决 scroll() position&colon;fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
微信小程序开发之tab导航栏
实现功能: 点击不同的tab导航,筛选数据 UI: js: data:{ navbar: ['半月维保', '季度维保', '半年维保',"年度维保"], //count ...

随机推荐

用大白话聊聊JavaSE -- 自定义注解入门
注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...
霍尼韦尔FC400A与FC400B的区别
给霍尼韦尔官方打电话咨询了下,发现两者区别不大,唯一的区别是400B可以和主机联动,也就是主机关的时候,400B也可以自动关闭,不需要手动去关闭电源,这样非常方便. 本来官方是只有400A的时候,但是 ...
原创QQ影音DLL劫持漏洞+动画实战教程
1.什么是DLL DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型.在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分割成 ...
uva 11292 Dragon of Loowater （勇者斗恶龙）
Problem C: The Dragon of Loowater Once upon a time, in the Kingdom of Loowater, a minor nuisance tur ...
【转】django的ORM操作数据库样例
这个算是我看到的大全了,希望可以解决明天我希望解决的两个问题... class Blog(models.Model): name = models.CharField(max_length=100) ...
Ztree手风琴效果(第三版)
第一版:点击一级目录展开,再点击时不能收回第二版:点击一级目录展开,再点击时可以收回第三版:优化样式,修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错) <%@ page lang ...
Android中那些有你不知道的事
在安卓开发中,总有那么一些看似简单,实则绊脚的难题,等你去探索,等你去解决,也许你已经遇见了解决了,也许你还没碰上,写下这篇总结,希望能帮助那行即将遇到的朋友,快速解决这些小问题! 一.activit ...
&dollar;()&period;click()和&dollar;(document)&period;on(&&num;39&semi;click&&num;39&semi;,&&num;39&semi;要选择的元素&&num;39&semi;,function(){})的不同
1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器; 2.$(document).on('click','要选择的元素',function(){ ...
&OpenCurlyDoubleQuote;全栈2019”Java多线程第三十三章：await与signal/signalAll
难度初级学习时间 10分钟适合人群零基础开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
Jedis 之初始&lt&semi;一&gt&semi;
package xx.jedis; import java.util.Set; import redis.clients.jedis.Jedis; import redis.clients.jedis ...