移动端唤醒软键盘布局

来源：互联网发布：淘宝客机器人多少钱编辑：程序博客网时间：2024/05/17 18:47

在移动端开发中，经常会有 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>

阅读全文

0 0