移动设备页面高度不足时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%高度啦。

时间： 2024-10-05 06:43:59

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

如何自动在html页面加载时动态改变div等元素的高度和宽度

这里需要用到jquery + css.原理是在页面加载时用javascript去动态改变一个class的高度和宽度.这样结合javascript能动态获取浏览器/页面的高度和宽度,从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比.下面的代码创建一个手机页面,每一行三个图片分占33%,每个图片div的高和宽会随着浏览器的大小变化而自适应. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"

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

有段时间扑了一个多月的在一个wifi的前端项目上快做完时各种小问题一堆一堆的修复处理了一些很零散的问题因为页面有一个所有页面都有一个背景色有的页面有背景图主要重点是移动前端的方向因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio) 对于页面适配起来其实有很多值得思考的对方页面宽度上的处理很方便可以用百分比的html body样式或者我使用了bootstrap 用它非常优秀的栅格化和断点页面高度上

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

基于JQuery实现滚动到页面底端时自动加载更多信息关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.

页面加载时遮罩效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>页面加载时遮罩效果</title> <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

javascript 获取页面高度（多种浏览器）（转）

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (

获取页面高度

有时候,即使高度被设置为100%,也只是页面的100%,如果某个表格突然很长,则其他的层的高度跟不上.从body的100%开始,就跟不上最长的那个div. 没有想到更好的解决方法. 现在的解决方法是: 用jquery获取最长的层的高度.height().再给其他的层设置这个最大高度. 注:jquery的window.height仅仅是可见部分的高度! 获取页面高度,布布扣,bubuko.com

获取网页页面高度

<SCRIPT LANGUAGE="JavaScript"> var s = "网页可见区域宽 :"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; s

页面出现滚动条时，居中的元素不会跳动的方法

我们经常会遇到这样的情况:在一个页面加载的开始,页面高度比较低,不会出现滚动条.而随着页面的加载,滚动条出现,页面中居中的标题,图片或者一些其他的东西会突然往左边跳一下. 这是因为,刚开始没有出现滚动条时,你用margin:0 auto;所做的居中是根据浏览器窗口大小而计算的居中.在出现滚动条时,用margin:0 auto;所做的居中是根据浏览器窗口大小减去滚动条的宽度而计算的居中.这样就会出现跳动的问题. 解决方法我是从一个博客的评论上学到的,看到这个解决办法,才发现自己学的东西有多浅显,惭

页面加载时让其显示笼罩层与加载等待图片

页面加载时让其显示笼罩层与加载等待图片(结局比较完美,过程很坎坷,所以一定总结整理下,备用): 用了ajax异步,是因为js内容不能即时的显示出来,因为js是单线程,要把队列中的任务执行完后才会执行刚才对js的处理要用beforeSend,complete的时候必须要用ajax异步 beforeSend: function () {},//程序一开始便会执行该函数,使用该方法必须使用异步ajax complete: function () {},//complete在success或error