在移动端经常会遇到fixed或者absolute定位的按钮被键盘弹出导致页面样式错乱，这个常见的问题其实用flex布局就可以避免。
<div class="container">
<header>标题</header>
<section>这是内容</section>
<footer>底部按钮</footer>
</div>
.container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
flex: 0 0 auto;
height: 1rem;
}
section {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
height: 1rem;
}
这样section的内容会随着页面高度的变化而自适应，小伙伴们别忘了height是会继承的，所以你得保证父元素的高度也是100%，比如html,body{ height: 100% }。
在移动端经常会遇到fixed或者absolute定位的按钮被键盘弹出导致页面样式错乱，这个常见的问题其实用flex...
移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面...
在做一个基于企业微信的h5移动页面时，当软键盘弹出时，底部fixed定位在ios上没事，安卓手机上，底部按钮会被顶...
问题描述： 项目中页面底部footer标签是fixed定位，输入法键盘弹出导致页面底部按钮上浮，由于时间紧迫，想到...
移动端最常见的就是顶部和底部的工具栏，如果用定位的方式实现将工具栏固定在顶部或底部，在使用输入法的时候会出现如下现...
iOS webview html5 移动端 软键盘弹起遮挡输入框 问题描述 移动web聊天页面，输入框在底部的时候...
https://www.cnblogs.com/zhengyan/p/6163626.html 做H5 App页面...
微信端ios移动端 软键盘收起后，页面内容不下滑（界面停留再软键盘上点击表单页面按钮无反应问题）关于这个问题啊，其...
js 移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘弹出收起都会影响页...
当点击input输入框时，手机的输入法软键盘会把定位到底部的选项卡（tabbar）给顶起来，影响页面美观。 解决方...
本文标题：移动端输入法软键盘致使定位底部的按钮位置错乱
本文链接：https://www.haomeiwen.com/subject/ukhvjqtx.html
网友评论