弹指间，重温几个设置满屏的小技巧
首先，上素材： 
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标签height为0，自然而然body100%也为0。
html,body{ height:100%;}所以设置的时候别不记得把“老子”带上。 讲到讲到 CSS 属性继承了，扩展温习下：
- CSS 哪些属性可以被继承？哪些不能够被继承?
fill-available 方式
html,body{ height:-webkit-fill-available; height:fill-available;}看到这里，有的同学可能就会好奇 fill-available 和100%设置有什么区别？
下面演示一波：
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-available、max-content、min-content、fit-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/
私人微信：y3517320520加我交流，备注平台渠道
或者扫码关注公众号发现更多前台有趣好玩的开发小技巧
image
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 弹指间，重温几个设置满屏的小技巧
