近日小伙伴们，在布局的是需要用到将某个div全屏铺满！无论怎么使用height属性，都无法满足自己的要求！让我回忆起自己第一次遇到这样的布局需求，也绕了不少弯路！今天就记录一下！以免自己日后忘却！
任务需求： 将div宽高铺满全屏！
先准备一个简单的html布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="box">hello world!</div>
</body>
</html>想到铺满全屏的话，就很容易想到这样的代码！
#box{
height: 100%
}但是，很遗憾!box并不能全屏显示！这是为什么呢？
其实道理很简单的！
100%这个属性值可以理解为一个计算属性！它是需要有一个基准值！而这个基准值就是其父级元素的高度值！
如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
height: 500px;
border: 2px solid red;
}
#test .inner{
height: 80%;
background: blue
}
</style>
</head>
<body>
<div id="test">
<div class="inner">我的高度是父级的80%</div>
</div>
</body>
</html>效果如下：
可以看到百分比的属性值起到作用了！主要的原因相信大家都看到了，就是我给 #test的盒子加了高度值：
#test{
height: 500px;
}这样一来 .inner的就有了基准值了，所以就可以使用了！
好！基础铺垫完毕！我们回到最初的地方！
方法一、找到#box的父级及以上节点，并给它们添加高度值！
html,body{
height: 100%;
min-height: 100%!important;
}大家可以看gif！100%已经起到效果了，唯一不足的就是拖动时候 会有抖动！
其实很简单！因为body默认会有8px的margin值！解决抖动的代码如下：
body{
margin: 0;
}方法二、改变position属性
如果你嫌弃上面的方法过于繁琐！那么我们还可以这样的做：
#box{
position: absolute;
//position: fixed; //或者利用这样的方法
left: 0;
top: 0;
height: 100%;
width: 100%;
}这样的写法，省略了个body,html添加属性值。仅仅给#box添加就行！原理是将#box脱离文档流，height的值就可以响应屏幕的高度了！
还有就是width:100%记得写上，否则宽度无用!!!
方法三：css3新特性 vh vw
随着css技术的发展，css3给我们提供一个视图的属性单位叫做vw vh等等。利用这个技术我们可以更简单的完成上面的需求。
#box{
height: 100vh;
width: 100vw;
}看图：
是不是很神奇啊！
简单解释一下：
- vh 就是将你的屏幕高度分成100份！
- vw就是将你的屏幕宽度分成100份！
这样你写前面的值就是div的高度！当然你如果想学习更多的关于vh vw的属性 。大家可以阅读一下下面的文章！
当然CSS3属性还是请大家慎用 慎用！
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
https://css-tricks.com/viewport-sized-typography/
好的！放水完毕！大家有新的方法，请留言！
下一篇我将会介绍 这样布局，会有什么bug 以及如何处理！
