篇幅较短,直接上素材:
常规开发种经常会碰到如上界面,我们希望它背景色全屏保持一致。
当然,从界面上来看,它这个效果图只是因为父容器未达到满屏导致底下留空白区域。
现在脑海过一下你能想到哪几个?
记不起来没关系,花2分钟时间简单过一下。
看到小标题应该知道我要say什么了吧
<body>
<div class="container"></div>
</body>
.container{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
这下子再也不用考虑html,body高度了,看着也挺好,会心一笑
javascript无所不能,同样可以解决此问题
<script type="text/javascript">
let screenH=document &&document.documentElement &&document.documentElement.clientHeight || window.innerHeight;
document.querySelector('body').style.height=screenHeight+"px";
</script>
发现不少前端友人用此法时,常常是如此
body{
height:100%;
}
结果发现依然是0,然后陷入了无限的疑问中...
因为CSS里部分属性是继承父级而来的,height就是其中之一,当前html标签height为0,自然而然body100%也为0。
html,body{
height:100%;
}
所以设置的时候别忘记把“老子”带上。讲到讲到CSS属性继承了,扩展温习下:
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;
}
设置100%的同时设置了padding撑破了外层容器,而fill-available没有,保持我们预想的高度。
fill-available是智能计算剩下可用空间,如果没有padding/margin等其它属性干扰,等同于100%,但若有属性干扰,那就会智能计算。在width、height中均适用
讲到这里,拓展一个问题
vh:css3新单位,view height的简写,是指可视窗口的高度,1vh=视窗高度的1%;
既然讲到CSS单位了,麻烦各位再脑补下这个问题:
vh单位定义为视窗高度的百分比,那岂不是esay?
body{
height:100vh;
}
搞定,大功告成!
这里扩展了解下vh在移动端设备上的部分“特性”
我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器
从效果图不难看出,在Safari浏览器、Google浏览器中100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。
作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh中,是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。才产生了我们此时所看到的效果图。
为什么会是这样的呢,Apple官方开发人员回应说"that it wasn’t a bug, it’s a feature."
原来,这是别具匠心的艺术品。滚动时可见区域会动态变化,如果我们相应地更新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的值,我们的界面将发生重绘,体验是十分不好的,应该尽量避免此类骚操作。
文章篇幅较短,重温几个技巧,希望对你有帮助,不喜勿喷(反正没有留言区)
参考:
http://suo.im/6xrGWg
https://css-tricks.com/