弹指间,重温几个设置满屏的小技巧

首先,上素材:
image

常规开发种经常会碰到如上界面,我们希望它背景色全屏保持一致。

当然,从界面上来看,它这个效果图只是因为父容器未达到满屏导致底下留空白区域。

现在脑海过一下你能想到哪几个?

记不起来没关系,花2分钟时间简单过一下。

postion 定位法

看到小标题应该知道我要 say 什么了吧

<body>    <div class="container"></div></body>
    .container{        position:absolute;        bottom:0;        top:0;        left:0;        right:0;    }

这下子再也不用考虑html,body高度了,看着也挺好,会心一笑

JS 动态获取法

javascript 无所不能,同样可以解决此问题

<script type="text/javascript"> let screenH=document &&document.documentElement &&document.documentElement.clientHeight || window.innerHeight; document.querySelector('body').style.height=screenHeight+"px";</script>

100%全屏法

发现不少前端友人用此法时,常常是如此

body{    height:100%;}

结果发现依然是 0,然后陷入了无限的疑问中...

image

因为 CSS 里部分属性是继承父级而来的,height就是其中之一,当前html标签height0,自然而然body100%也为0

html,body{    height:100%;}

所以设置的时候别忘记把“老子”带上。 讲到讲到 CSS 属性继承了,扩展温习下:

  • CSS 哪些属性可以被继承?哪些不能够被继承?

fill-available 方式

html,body{    height:-webkit-fill-available;    height:fill-available;}

看到这里,有的同学可能就会好奇 fill-available100%设置有什么区别?

下面演示一波:

html,body{    height:100%,    padding:20px;}body{    height:-webkit-fill-available;    height:fill-available;    padding:20px;}
image

设置 100%的同时设置了 padding 撑破了外层容器,而fill-available没有,保持我们预想的高度。

fill-available是智能计算剩下可用空间,如果没有padding/margin等其它属性干扰,等同于 100%,但若有属性干扰,那就会智能计算。在 width、height 中均适用

讲到这里,拓展一个问题

  • fill-availablemax-contentmin-contentfit-conten这四个自适应关键字都什么作用?不妨了解一下

vh 定义法

vh:css3 新单位,view height 的简写,是指可视窗口的高度,1vh=视窗高度的 1%;

既然讲到 CSS 单位了,麻烦各位再脑补下这个问题:

  • CSS 单位都有哪些?各自有什么区别?

vh 单位定义为视窗高度的百分比,那岂不是 esay?

body{    height:100vh;}

搞定,大功告成!

这里扩展了解下 vh 在移动端设备上的部分“特性”

我们依然设置 body 100vh 的情况下,分别打开微信内置浏览器、Safari 浏览器、Google 浏览器

image

从效果图不难看出,在 Safari 浏览器、Google 浏览器中 100vh 这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。

作为一个 cv 高手,借助搜索引擎我们了解到,Safari 把网址栏与工具栏算进了 100vh 中,是第一个通过选择根据屏幕的最大高度为 vh 定义固定值来更新其实现的移动浏览器之一,而后 Google 浏览器也效仿它。才产生了我们此时所看到的效果图。

为什么会是这样的呢,Apple 官方开发人员回应说"that it wasn’t a bug, it’s a feature."

原来,这是别具匠心的艺术品。滚动时可见区域会动态变化,如果我们相应地更新 CSS 视口高度,则需要在滚动过程中更新布局。为了达到更好的用户体验,使用较大的视图尺寸是最好的折衷方案。

通过 CSS 变量来设置

JavaScript 是万能的,我们可以通过 JS 获取处理存储于 CSS 变量中并应用它。

 body{     height:100vh;     height:calc(var(--vh,1vh)*100); }

提供备用属性,像这样就 OK 了,接下来我们来设置自定义变量

  //获取视口高度 *0.01获取vh单位值let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01; //document中设置自定义CSS属性变量document.documentElement.style.setProperty('--vh', `${vh}px`);

这样就成功在:root 中创建了--vh的 css 变量

为了防止旋转屏幕功能的使用,我们需要监听窗口调整大小事件来更新我们创建的--vh 值

window.addEventListener("resize",()=>{    let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01;    document.documentElement.style.setProperty('--vh', `${vh}px`);})

很明显这样的代价还是有点大的,一旦更新--vh 的值,我们的界面将发生重绘,体验是十分不好的,应该尽量避免此类骚操作。
image

参考:

http://suo.im/6xrGWg

https://css-tricks.com/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,770评论 4 358
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,116评论 1 286
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,656评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,372评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,704评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,166评论 1 204
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,535评论 2 306
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,259评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,882评论 1 236
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,218评论 2 239
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,760评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,126评论 2 249
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,667评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,935评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,644评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,171评论 2 265
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,119评论 2 258

推荐阅读更多精彩内容