android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题...

移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡在表单上,影响美观。这个可以采用flex布局完美解决。

HTML代码

这里面是input输入框等。。。。

提交

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%的时候,按钮会在页面内容最后面,而不是固定在最下面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/378240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dbms支持哪几种数据模型_DBMS中不同类型的数据模型

dbms支持哪几种数据模型资料模型 (Data Model) A data model is a model that defines in which format the data are represented and accessed. Data model mainly defines some of the data elements and relationships that exist between them. 数据模型是定义数据以哪种格…

JS 数组迭代方法

var arr [3,4,5,6,7,"a"]; var isNum function(elem,index,AAA){ return !isNaN(elem);} var toUpperCase function(elem){ return String.prototype.toUpperCase.apply(elem);} var print function(elem,index){ console.log(index"."elem);} /*对数组…

php开源问答_PHP基础知识能力问答

php开源问答This section contains Aptitude Questions and Answers on PHP Basics. 本部分包含有关PHP基础知识的 Aptitude问题和解答。 1) There are the following statements that are given below, which of them are correct PHP? PHP stands for the Preprocessor Hom…

【数据结构基础笔记】【顺序表】

代码参考《妙趣横生的算法.C语言实现》 文章目录前言1、创建顺序表2、顺序表插入元素3、顺序表删除元素4、顺序表实例分析1、静态2、动态5、顺序表总结前言 本章总结:从静态和动态分别进行顺序表的创建、插入、删除、以及实例分析 1、创建顺序表 1、静态地生成一张…

ubuntu安装oracle unzip: No such file or directory

$ln -s /usr/bin/unzip /你的oracle11安装目录/install/unzip$sudo chmod 777 /usr/bin/unzip转载于:https://www.cnblogs.com/qm4050/archive/2011/08/25/2241466.html

一、网络爬虫概述

1,浏览器与网络爬虫的区别 答: 对于浏览器而言:浏览器打开一个网站,会对网站服务器发送一个request请求,服务器收到该请求之后,会给浏览器一个respond响应,该响应携带很多数据,之后…

百度android广告sdk下载,IS_Freedom

美数广告 SDK接入流程1.嵌入广告SDK将 sdk-android-demo/app/libs 中的 meishu-sdk_xxx_release.aar、open_ad_sdk_xxx.aar、Baidu_MobAds_SDK-release-xxx.aar、GDTSDK.unionNormal.xxx.aar、msa_mdid_1.0.13 拷贝到项目的 libs 下,对应的 build.gradle 文件里面添…

关于《加密与解密》的读后感----对dump脱壳的一点思考

偶然翻了一下手机日历,原来今天是夏至啊,时间过的真快。ISCC的比赛已经持续了2个多月了,我也跟着比赛的那些题目学了2个月.......虽然过程很辛苦,但感觉还是很幸运的,能在大三的时候遇到ISCC,不管怎样&…

java vector_Java Vector elements()方法与示例

java vector向量类elements()方法 (Vector Class elements() method) elements() method is available in java.util package. elements()方法在java.util包中可用。 elements() method is used to get an enumeration of the elements that exist in this Vector. elements()方…

【数据结构基础笔记】【链表】

代码参考《妙趣横生的算法.C语言实现》 文章目录前言1、链表基础2、创建一个链表3、插入结点4、删除结点5、销毁链表6、实例分析前言 本章总结:链表的定义、创建、销毁,结点的插入与删除 1、链表基础 链表的物理存储结构是用一组地址任意的存储单元存储…

动态添加,删除行之心理测试系统

动态添加,删除行之考试系统 数据库设计: xl_option 题目选项 20090105134755404(编号) 20090105134904421(外键) 比较符合(选项内容) ②(选项标号) 2(选项分值) xl_subject 题目信息 20090105134943608(编号&#xff…

android bitmap裁剪中间,Android裁剪中心位图

虽然上面的大多数答案提供了一种方法来实现这一点,但已经有一种内置的方法来实现这一点,它是一行代码(ThumbnailUtils.extractThumbnail())int dimension getSquareCropDimensionForBitmap(bitmap);bitmap ThumbnailUtils.extractThumbnail(bitmap, di…

二、request请求库

一、requests介绍与安装 1,requests介绍 答:requests是一个优雅且简单的Python HTTP请求库 2,requests作用 答:requests的作用是发送请求获取响应数据 3,requests安装 答:pip install requests 二、…

Java Vector Capacity()方法与示例

向量类的Capacity()方法 (Vector Class capacity() method) capacity() method is available in java.util package. Capacity()方法在java.util包中可用。 capacity() method is used to return the current capacity (i.e. initially, how many object exists) of this Vecto…

MFC和GTK的区别

关键技术 http://blog.csdn.net/master_max/article/details/1540204 MFC和GTK的区别?? 1.  两者都是基于面向对象设计的。尽管MFC是用C写的,而GTK是用C写的,但思想都是面向对象的。GTK使用glib的对象机制,由于用C写…

视频图像质量评价

目录1、人眼视觉特性1、眼的适应性2、对比灵敏度3、空间分辨率和时间分辨率4、马赫效应5、可见度阈值2、图像质量测度3、图像评价方法4、图像评价方法的优劣1、人眼视觉特性 1、眼的适应性 暗适应性:从亮环境到暗环境,适应暗环境的特性 亮适应性&#…

鸿蒙科技与文化,数字阅读 | “华为鸿蒙”:当现代科技遇到古典文化

华为事件愈演愈烈。海思芯片 20 年 " 备胎 " 终转正,那么操作系统呢?最近,华为为自主研发的操作系统注册商标—— " 鸿蒙 ",引发了关于华为注册整本《山海经》的热烈讨论,很多人的朋友圈&#xff…

三、Beautiful Soup解析库

一、Beautiful Soup介绍与安装 1,Beautiful Soup介绍 答:Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库 2,Beautiful Soup安装 答:安装Beautiful Soup 4:pip install bs4 安装lxml:pip…

strictmath_Java StrictMath sqrt()方法与示例

strictmathStrictMath类sqrt()方法 (StrictMath Class sqrt() method) sqrt() Method is available in java.lang package. sqrt()方法在java.lang包中可用。 sqrt() Method is used to find the square root of the given parameter in the method. Here, "sqrt" st…

recovery编译问题汇总

1、修改支持USB大容量存储 (1)、首先需要查看手机lun位置 手机链接电脑,打开cmd命令行,依次输入以下命令: adb shell find /sys -name "lun" 输出以下结果: 发现手机输出结果有两个,需要进一步查…