1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 html,body{ 15 height: 100%; 16 width: 100%; 17 } 18 #page { 19 display: grid; /* 1.設置display為grid */ 20 width: 100%; 21 height: 100%; 22 grid-template-areas: "head head" 23 "nav main" 24 "nav foot"; /* 2.區域划分 當前為 三行 兩列 */ 25 grid-template-rows: 50px 1fr 30px; /* 3.各區域 寬高設置 */ 26 grid-template-columns: 150px 1fr; 27 } 28 29 #page > header { 30 grid-area: head; /* 4. 指定當前元素所在的區域位置, 從grid-template-areas選取值 */ 31 background-color: #8ca0ff; 32 } 33 34 #page > nav { 35 grid-area: nav; 36 background-color: #ffa08c; 37 } 38 39 #page > main { 40 grid-area: main; 41 background-color: #ffff64; 42 } 43 44 #page > footer { 45 grid-area: foot; 46 background-color: #8cffa0; 47 } 48 </style> 49 <body> 50 <section id="page"> 51 <header>Header</header> 52 <nav>Navigation</nav> 53 <main>Main area</main> 54 <footer>Footer</footer> 55 </section> 56 </body> 57 58 </html>
如果要以百分比設置元素（div）的尺寸，必要以父元素的尺寸作為參考，如果父元素沒有設置尺寸，那么子元素（div）尺寸自然不會生效。
在怪異模式下，body可以作為根元素，設置它的高度為100%的時候（不考慮外邊距），body的高度取是瀏覽器的高度。
在標准模式下，html元素才是根節點，div的父元素是body，body的父元素是html，然后html設置為100%，取得是瀏覽器的高度，body高度設置為100%，得到的是html的的高度，所以最好同時設置html,body{height: 100%;width: 100%;}。
還可以直接設置元素為absolute布局height:100%也能生效