移动端设置元素高度为全屏

移动端开发中，经常用到某个块元素占满全屏，大家想到的第一个方法肯定是设置height：100%，但是这种方法是无效的，原因我相信大家应该都清楚，接下来我给大家介绍几种方法：

通过css进行设置

1. 使用vw，vh进行设置，这种方法我平时自己做demo时候经常会用到。
2. vw,vh是css3新出的单位，1vw=1/100浏览器宽度，1vh=1/100浏览器高度。一般100vw就是整个屏幕宽度，100vh就是整个屏幕高度。
3. 有一点不好的是，vw,vh的兼容性不是100%。所以对兼容性要求严格的小伙伴还是慎用这个办法，但是现在他的兼容性越来越乐观了。我相信以后他会很流行。

通过定位实现

代码如下：

	div{
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		bottom: 0px;
	}

这种方法也能实现高度占满全屏

通过js实现

window.screen.availWidth 返回当前屏幕空白部分的宽度
window.screen.availHeight 返回当前屏幕空白部分的高度
通过window.screen.availHeight获取屏幕高度，并把它赋值给元素高度
这种方法也很好用，如果你对页面要求很严格的话，就可以使用这种方法