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

最新推荐文章于 2024-04-16 17:18:25 发布

转载最新推荐文章于 2024-04-16 17:18:25 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/snowhite/p/9682282.html

本文提供了一种解决移动端，特别是iOS系统下，使用position:fixed定位失效的问题方案。通过调整CSS样式，确保即使在输入框获得焦点时，固定定位元素仍能保持其位置不变。适用于移动端Web开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端,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
来源：慕课网

转载于:https://www.cnblogs.com/snowhite/p/9682282.html