1、問題的發現：div設定height高度為100%卻未生效
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.contentDiv {
width: 100%;
height: 100%;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="contentDiv"></div>
</body>
檢視上面的代碼，結構很簡單，一個div，寬度和高度都設定100%，背景顔色設定了#ccc。
此時想象一下在浏覽器中應該顯示一個背景顔色為灰色的全屏的div，但是，結果并不是這樣，反而，此時div的高度是0！！！
2、問題的解決：
需要給html和body設定高度為100%，此時div設定高度100%才生效，代碼如下：
<style>
html, body {
width: 100%;
height: 100%;
}
......
</style>
3、問題的原因：
給div設定高度為100%時，是相對于父節點（此時div的父節點是body）設定的，如果此時隻設定body的高度為100%，結果發現body高度還是0！！！是以此時再要找到body的父節點（也就是html），也給它設定高度即可解決這個問題。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)