移动设备页面高度不足时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. Notes of learning AutoLayout

    在XCode5中,如果我们添加一个Button或者Label,或者其他的什么标准View,而不设置任何constraints,IB会自动生成constraints,而这些constraints是fix ...

  2. 前后数据交互(ajax) -- 初始化页面表格

    // 初始化员工信息列表 function loadpage ( pageNum ) { var keywords = $("#keywords").val(); $(" ...

  3. eclipse新建安卓项目点击finish后窗口无法关闭

    eclipse新建安卓项目点击finish后窗口不会自动关闭,而且工程会有很多报错: 如图,这个页面点击finish一直无法关闭,后来试了试,才发现是因为新建项目的第一个页面的sdk版本的问题: 这里 ...

  4. 2016 - 1 - 23 xml解析 -- 语法简介

    一: XML的概念 1. 一种可拓展标记语言 2. 与json一样,也是一种常用的数据交互格式 3. 一般也叫XML文档---XML Document 二: XML语法   1.一个完整的XML文档一 ...

  5. Maven工程中的右键team

    与资源库同步(S):在需要合并版本时使用 提交(C):本地代码写入源码库 更新(U):本地代码升级到服务器端版本 在点击更新时,请注意: 如果当前项目有改动(甚至是比原来多了一个空格),则此时无法更新 ...

  6. 使用PHP处理文本小技巧

    PHP的Cli模式使用:http://www.php.net/manual/zh/features.commandline.php PHP命令行部分参数:-B     在处理 stdin 之前先执行 ...

  7. div高度自适应(总结:min-height:100px; height:auto;的用法)

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  8. nginx+tomcat集群配置(4)--rewrite规则和多应用根目录设定思路

    前言: nginx中有一块很重要的概念, 就是rewrite规则. 它会对URL进行修改, 然后进行内部的重定向. rewrite授予了nginx更多的自由, 使得后级服务的接入更加地方便. 本文将简 ...

  9. java中,去除空白的方法

    有时候,我们页面传过来的值,或者做excel导入时填入的值都需要去掉像空格一样的一些特殊字符,下面这个方法可去掉像制表符,换行键,回车,空格或者不在ACSII中 的特殊字符 /** * 去除字符串开始 ...

  10. chrome 49 版本 跨越 --args --disable-web-security --user-data-dir

    转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...