android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题...
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡在表单上,影响美观。这个可以采用flex布局完美解决。
HTML代码
提交
css代码
html,body{padding: 0;margin: 0;height:100%}
.mui-content{height:100%;display: flex;display:-ms-flex;display:-webkit-flex; flex-direction: column;}
.container-box{flex:1;-ms-flex:1;-webkit-flex:1}
.operate {
position: relative;
margin:1rem 1rem 3rem;
}
.operate .btn-submit {
width: 100%;
border-radius: .2rem;
height: 2rem;
color: #fff;
font-size: .8rem;
line-height: 1;
padding: 0;
letter-spacing: 1px;
border: 0;
background-color: #00aaee;
}
说明:给html,body,还有body内的容器div设置高度100%,撑满屏幕。容器div设置display:flex显示,并设置flex的方向为column,设置容器div里面表单部分为flex:1,然后下面的按钮控件就相对定位好就行,这样表单部分的高度就等于页面高度减去按钮部分的高度。在安卓手机上,键盘弹出时,按钮不会遮挡到上面的表单部分。
另外,如果页面高度有可能超过100%,那就不要设置高度 height:100%,而是设置min-height:100%,这样一来,在页面高度不超过100%的时候,按钮会固定在最下面,在页面超过100%的时候,按钮会在页面内容最后面,而不是固定在最下面。
android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题...相关推荐
- android 编译 汇编,汇编语言写的hellworld,在安卓手机上运行
小白:小程,你为什么给我讲这么古老的语言?我有可能会跟它打交道吗? 小程:如果允许在使用时才去学的话,任何东西都不必提前学习.而"用时才学"的情况是经常存在的,也是有道理的,你的时 ...
- android制作开场动画,怎样制作视频片头?安卓手机上制作倒计时片头并添加到视频上|开场倒计时视频制作...
注意此教程方案是『安卓手机端教程方案』 如果在手机端操作不方便或对眼睛不好 也可以用另外电脑端的教程方案操作:10秒倒计时视频[找更多方案] 今天要介绍怎样制作视频片头是在安卓手机上制作一段倒计时片头 ...
- airpods连接android怎么设置,AirPods怎么自定义功能 AirPods在安卓手机上连接怎么操作...
1.打开设置,找到控制中心,进入自定义界面,添加听觉功能 2.调出iphone的控制面板,点击那个耳朵的标志. 3.点击打开,便可以两个耳机之间彼此对话,你可以自己佩戴一个,交给受访/交谈对象进行对话 ...
- 【Android 教程系列第 21 篇】如何查看安卓手机上支持哪些硬件和软件
这是[Android 教程系列第 21 篇],如果觉得有用的话,欢迎关注专栏. 我们做一些功能的时候,需要先知道当前功能是否被硬件所支持,要不然费很大劲做的功能到最后发现因为硬件不支持而功亏一篑,那可 ...
- android还原快捷键是什么意思,你所不知道的安卓手机上的通用快捷键
之前菲菲分享过很多关于电脑PC端快捷键的巧妙用法,那搭载安卓(Android)智能操作系统的手机有木有一样实用的快捷键呢?同时又该如何使用?好,带着这些问题我们一起来学习一下咯. 一.手机屏幕截屏(开 ...
- flex布局,左边右边高度固定,左边溢出的内容鼠标滚轮显示,左边滚动右边视图不动
flex布局,左边右边高度固定,左边溢出的内容鼠标滚轮显示,左边滚动右边视图不动 代码如下 <!doctype html> <html lang="en"> ...
- android系统文件重命名文件格式,安卓手机上文件的后缀名怎么改?
安卓手机上文件的后缀名怎么改?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 安卓手机上文件的后缀名怎么改? 用手机修改 ...
- android实现多画面播放,快手同框怎么弄?怎样制作多个视频同框?安卓手机上制作三个不同的视频同框播放...
同框视频都知道是什么意思吗?就是视频画面中有多个不一样的视频同时播放的效果哦,这种视频在快手等平台是很火的,那么快手同框怎么弄?今天小编的教程是实现快手同框怎么弄录好的视频,而不是解决快手同框怎么开启 ...
- android模糊后面视频,在安卓手机上怎么制作中间是横视频上下是模糊效果的竖视频?手机视频短片制作...
注意此教程方案是『安卓手机端教程方案』 今天要介绍的是安卓手机视频短片制作软件,可以在安卓手机上制作手机视频短片哦,制作那种中间是横视频上下是模糊效果的竖视频哦~不是手机看的视频片,手机怎么下载好看的 ...
最新文章
- c语言有重复元素全排列,【求助】全排列 不重复 由小到大 输出 代码
- 这老哥把GPU当暖气用,省钱了
- cudnn.h: No such file or directory
- python手机版代码-Python手机号码归属地查询代码
- mysql8.0默认引擎是什么_MySQL8.0新特性【转】
- 李彦宏:“最后一公里”的自动驾驶会提前实现
- JavaScript知识点总结 1
- android5.1使用SerialManagerService
- Mysql实现企业级数据库主从复制架构实战
- ElementUI:项目中引入自己的ICON
- 小榕flash管理器xp 是什么
- 屏蔽网页所有弹出广告的神器工具!Adblock插件
- 超立方体及其可视化(Processing)
- Ethereum Yellow Paper
- 《金蝶ERP-K/3完全使用详解》——6.2 产品预测单
- 如何给PPT加上页码?
- 被房地产坑惨的老板电器,终于要“回血”了!
- 移动端网页录音上传,服务端智能语音识别
- 与小米一起“星辰大海,云端漫步”
- QT发生crashed
热门文章
- springboot 压测 50并发 线程等待_Spring Boot中三款内嵌容器的使用
- python 没找到库_这十个Python常用库,学习Python的你必须要知道!
- Dapr 在阿里云原生的实践
- Hologres揭秘:深度解析高效率分布式查询引擎
- 手机格斗网游该如何避免延迟?
- 头号小游戏玩家科普指南
- 【蓝桥杯Java_C组·从零开始卷】第一节、环境与变量类型运算符与类型分析
- PHP酒店管理demo案例(数组遍历)
- 零基础学Python-爬虫-2、scrapy框架(测试案例篇·技术点在后面文章内讲解)【测试将一篇小说的所有访问路径与标题存储到一个文件下】
- 使用RMAN在ASM和文件系统之间拷贝数据