湖南拾牛网络科技有限公司
  • 咨询热线:400-8116-098
在线客服 在线QQ 微信咨询 返回顶部
  • 联系方式
  • 公司电话:0731-88938682
  • 公司地址: 湖南省长沙市桐梓坡西路麓谷国际工业园C栋8楼

Web移动端Fixed布局的解决方案
  • 来源: 本站      作者:      时间:2015-10-12
  •  

    移动端业务开发,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: