很多人都知道
width屬性可以繼承100%，不設置絕對寬度就可以佔滿整個瀏覽器；
但是height設置100%無法佔滿整個瀏覽器高度；
原因：最外層的盒子需要繼承父級元素的width和height，
它的父級爲html和body，並不是其中一個，
html和body的width爲100%，但是height默認爲auto，
所以要同時給html和body設置高度爲100%
這樣設置之後，最外層的盒子出現了寬高都爲百分之百的效果，
但是高度上會溢出，出現滾動條，
原因：body的margin默認有值，
邊距加上百分之百的內容會超出可視範圍，
所以會出現滾定條，
直接把body中的margin值設爲0，滾動條消失
下面源碼拉走看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>full screen</title>
</head>
<style>
/*html、body同爲div的父級，但是html和body高度默認值爲auto，所以div繼承高度爲0*/
html, body {
height: 100%;
}
/*body默認存在margin值，所以邊距加內容部分超出百分之百會溢出，出現滾動條，清除margin就OK*/
body {
margin: 0;
}
div {
height: 100%;
background: #009678;
}
</style>
<body>
<div></div>
</body>
</html>