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

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

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

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

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

此时我们可以使用

  1. position:absolute;
  2. left:0;
  3. right:0;
  4. top:0;
  5. 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. Android平板电脑开发— — —碎片

    碎片是一种可以嵌入在活动中的UI片段,它能让程序更加合理与充分地使用大屏幕的空间,碎片通常都是在平板电脑开发中才会使用 简单实例 左碎片布局 <?xml version="1.0&qu ...

  2. cas 在.net 下的单点登录实现及 ,Net Mvc的接入

    最近在研究单点登录,发现用的最广的就是cas了,查了下资料,发现有人写了详细的说明 地址:http://www.cnblogs.com/zhenyulu/archive/2013/01/22/2870 ...

  3. CSS 第四天 多重背景 变形 过渡

    背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...

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

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

  5. 用VS2010+Qt4.6.4编译QtAV

    http://blog.csdn.net/trustguan/article/details/45623891 如果在链接的过程中,出现以上错误: 1>MSVCRTD.lib(MSVCR100D ...

  6. HttpContext.Current.Cache 和HttpRuntime.Cache的区别

    先看MSDN上的解释:      HttpContext.Current.Cache:为当前 HTTP 请求获取Cache对象.      HttpRuntime.Cache:获取当前应用程序的Cac ...

  7. Spring4 + Quartz-2.2.0集成实例

    Spring3.0不支持Quartz2.0,因为org.quartz.CronTrigger在2.0从class变成了一个interface造成IncompatibleClassChangeError ...

  8. UDP信息接收与发送

    转载:http://www.cnblogs.com/sunev/archive/2012/08/08/2627247.html 一.摘要 总结基于C#的UDP协议的同步通信. 二.实验平台 Visua ...

  9. 原型模式(Prototype Pattern)

    用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 它通过复制一个已经存在的实例来返回新的实例,而不是新建实例.被复制的实例就是我们所称的原型,这个原型是可定制的. 原型模式多用于创建复杂 ...

  10. css transform skew变换

    两个参数,x-保持纵坐标不变,所有点旋转逆时针旋转x度,y-横坐标不变所有点顺时针旋转y度