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%也能生效