移动端唤醒软键盘布局

最新推荐文章于 2022-12-22 19:18:36 发布

Joker_561

最新推荐文章于 2022-12-22 19:18:36 发布

阅读量1k

点赞数

分类专栏： CSS布局文章标签：布局移动

本文链接：https://blog.youkuaiyun.com/sinat_34368775/article/details/77851733

版权

CSS布局专栏收录该内容

1 篇文章

订阅专栏

在移动端开发中，经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下，会造成原本布局的混乱问题，因为在IOS端软键盘唤醒后，fixed布局会失效，软键盘会把输入框顶起来（但是输入框不会贴近键盘底部），最近做了项目的评价功能，结合了安卓和IOS中布局的表现问题，写了一个DEMO，经过测试，可以完美解决这个问题

        <style>
            /*视图头部*/
            header {    
                position: fixed;
                height: 50px;
                left: 0;
                right: 0;
                top: 0;
                z-index: 9;
                width: 100%;
                background: greenyellow;
            }
            /*视图底部*/
            footer {
                position: fixed;
                height: 34px;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 9;
                background: greenyellow;
            }
            /*视图内容区域*/
            .box {
                position: absolute;
                top: 50px;
                bottom: 34px;
                overflow-y: scroll;
                height: 2000px;
            }

        </style>

    <body>
        <header>
            header
        </header>

        <!--内容视图区域-->
        <div class="box">
            <!--内容视图-->
        </div>

        <footer>
            <input type="text" placeholder="请填写商品评论。。。" />
            <button class="submit">提交</button>
        </footer>
    </body>