在移动端,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. 如何在MAC上运行exe程序

    1. 首先下载并运行CrossOver 运行CrossOver需要收费,试用期为14天,运行CrossOver 2. 选择exe应用程序,新建容器,安装exe程序 3.安装成功后,运行exe应用程序启 ...

  2. mysql group by 对多个字段进行分组

    在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计数据.比如有一个学生选课表,表结构如下: Table: Subject_Selection S ...

  3. Lodop删除语句Deleted只能内嵌设计维护可用

    有些人想用类似如下的语句删除打印项,或判断后把不需要的打印项删除,这种删除语句只能在打印设计或打印维护内嵌的时候使用,打印预览内嵌也不能使用.LODOP.SET_PRINT_STYLEA(2,'Del ...

  4. 一条命令停止所有lxc容器，删除所有lxc容器

    for i in $(virsh -c lxc:/// list | grep -v 'Id' | awk '{print $2}');do virsh -c lxc:/// destroy ${i} ...

  5. HDU4341-Gold miner-分组DP

    模拟黄金矿工这个游戏,给出每一个金子的位置和所需时间,计算在给定时间内最大收益. 刚看这道题以为金子的位置没什么用,直接DP就行,WA了一发终于明白如果金子和人共线的话只能按顺序抓. 这就是需要考虑先 ...

  6. mysql 备份数据语句

    rem ******MySQL backup start********@echo offforfiles /p "D:\website\备份\数据库日常备份" /m backup ...

  7. Hdoj 4540.威威猫系列故事——打地鼠 题解

    Problem Description 威威猫最近不务正业,每天沉迷于游戏"打地鼠". 每当朋友们劝他别太着迷游戏,应该好好工作的时候,他总是说,我是威威猫,猫打老鼠就是我的工作! ...

  8. Android RadioGroup 学习

    Api 参考地址 博文地址 RadioGroup相关属性: //返回该单选按钮组中所选择的单选按钮的标识 ID,如果没有选中的单选按钮则返回 -1. RadioGroup.getCheckedRadi ...

  9. 【BZOJ1568】[JSOI2008]Blue Mary开公司（李超线段树）

    [BZOJ1568][JSOI2008]Blue Mary开公司(李超线段树) 题面 BZOJ 洛谷 题解 是模板题啊. #include<iostream> #include<cs ...

  10. c# double decimal

    两种类型 double范围比decimal大,精度比之低 类型 大致范围 精度 .NET Framework 类型 double ±5.0 × 10−324 到 ±1.7 × 10308 15 到 1 ...