<div class="example">
</div>
</body>
<html>
.example{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgb(55, 137, 243);
}
注意：使用fixed后，不需要理会父级元素是否有定位属性，均能撑满浏览器可视区域，但目标元素不随滚动容器的滚动而滚动
方法四：使用flex布局
给需要撑满的容器的父元素添加display：flex，然后给撑满的元素添加flex：1 1 auto，如下：
<html>
<body>
<div class="example">
</div>
</body>
<html>
html,body{
width:100%;
height:100%;
}
body{
display: flex;
}
.example{
background:#fc1;
flex:1 1 auto;
}
注意：使用flex同样需要父元素的有高度和宽度，否则不会撑开。
方法五：使用javascript获取浏览器高度
<html>
<body>
<div class="example">
</div>
</body>
<html>
<script>
let example = document.getElementById('example')
let height = document.documentElement.clientHeight
example.style.height = `${height}px`
</script>
