欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 19:13:52
...
在做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%高度啦。