移动设备页面高度不足时min-height 的尴尬处理

在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度。

我们经常使用min-height来处理,比如min-height:568px; 对应的是iPhone5 的高度;

而这样iPhone6plus下方就会出现空白。

而如果设置 min-height:736px; iPhone5的话就会出现滚动条;

此时我们可以使用

position:absolute;
left:0;
right:0;
top:0;
bottom:0;

把min-height 干掉 就适应任何屏幕100%高度啦。

移动设备页面高度不足时min-height 的尴尬处理的更多相关文章

  1. tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结

    有段时间 扑了一个多月的在一个wifi的前端项目上 快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题 因为页面有一个所有页面都有一个背景色 有的页面有背景图 主要重点是移动前端的方向 因为现 ...

  2. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  3. html页面高度不同浏览器兼容性设置

    页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...

  4. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  5. 框架页面高度自动刷新Javascript脚本

    实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如 ...

  6. js里获取页面高度和文档高度

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  7. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  8. 关于javascript获取页面高度宽度

    在市容市政项目中,计算jqgrid的自适应高度时,发现jQuery(window).height()和jQuery(document).height()的数值有差异. 最初使用的是jQuery(doc ...

  9. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

随机推荐

  1. 在eclipse中安装配置WebDriver

    安装好eclipse环境后,下载Selenium jar包 在eclipse中新建一个java project 之后选择新建的工程,将Selenium jar包中的lib文件夹和selenium-ja ...

  2. 关于struts2.0 中 struts.xml设置了struts.devMode 的值为TRUE后仍然不起作用的分析

    首先确认jdk 和tomcat的环境变量是否配置正确. 下面是配置方式 jdk的环境变量配置步骤: 安装j2sdk以后,需要配置一下环境变量,在我的电脑->属性->高级->环境变量- ...

  3. Mousejack Hacking : 如何利用MouseJack进行物理攻击

    0×00 前言 近期安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的.黑客可对一百米范围内存在漏洞的蓝牙无线键鼠进行嗅探甚至劫持,从而 ...

  4. 详解Android功耗分析工具Power Tutor的使用

    简介: PowerTutor 是由美国密歇根大学在谷歌的指导下开发的.它是用来展示google智能手机中主要组件或应用功耗的一种应用程序.例如,CPU,网络链接,LCD显示屏,GPS等.它允许开发者很 ...

  5. cocos2d 中显示系统时间

    用到的两个方法先贴上 这个是时间回调 每分钟回去调用一次时间设置方法 //定时更新状态栏上的时间 void MGameScene::update(float dt) { ; fpassedTime + ...

  6. GridView的DataFormatString格式化字符串

    DataFormatString="{0:格式字符串}" 0:代表字段本身 冒号后面的代表希望的格式 比如 {0:yyyy-MM-dd}  显示的时间类型就是2016-04-11 ...

  7. IncDec Sequence

    题目链接 http://www.lydsy.com/JudgeOnline/problem.php?id=3043[题目描述]给定一个长度为 n 的数列{a1,a2...an},每次可以选择一个区间[ ...

  8. kuangbin_SegTree B (HDU 1754)

    跟A题类似 只是把update从增减直接改为赋值 query从求和改为求最大值 其他几乎一样 #include <cstdio> #include <cstring> #inc ...

  9. MongoDB学习笔记三:查询

    MongoDB中使用find来进行查询.查询就是返回一个集合中文档的子集,子集合的范围从0个文档到整个集合.find的第一个参数决定了要返回哪些文档,其形式也是一个文档,说明要执行的查询细节.空的查询 ...

  10. 自动选中div中的文字

    <html> <head> <title></title> <script type="text/javascript" de ...