Web移动端Fixed布局的解决方案

最新推荐文章于 2024-03-29 19:14:24 发布

gs981600308

最新推荐文章于 2024-03-29 19:14:24 发布

阅读量836

点赞数

分类专栏：笔记学习笔记

本文链接：https://blog.csdn.net/gs981600308/article/details/97891434

版权

本文探讨了iOS和Android下fixed布局在输入框存在时遇到的问题，特别是软键盘唤起导致fixed元素失效。提出了解决思路，包括使fixed元素的父级不出现滚动，利用`-webkit-overflow-scrolling: touch`恢复滚动流畅性，以及针对Android2.3以下系统的处理。此外，还提到了一些其他细节处理，如输入框被遮挡和第三方浏览器的适配问题。

摘要由CSDN通过智能技术生成

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

iOS下的 Fixed + Input BUG现象
让我们先举个栗子，最直观的说明一下这个 BUG 的现象。常规的 fixed 布局，可能使用如下布局（以下仅示意代码）：

<body class="layout-fixed">
    <!-- fixed定位的头部 -->
    <header>
        
    </header>
    
    <!-- 可以滚动的区域 -->
    <main>
        <!-- 内容在这里... -->
    </main>
    
    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

对应的样式如下：:

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 {
    margin-top: 50px;
    margin-bottom: 34px;
    height: 2000px
}

然后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置，目测没问题了。

在这里插入图片描述
但接下来问题就来了！如果底部输入框软键盘被唤起以后，再次滑动页面