让元素高度撑满整个页面

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

posted @ 2019-10-16 15:06 雾戤阅读(1261) 评论(0) 收藏举报

刷新页面返回顶部