布局问题： （ 头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll）） 

 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   <style>
 9     html,body,ul,li,p{
10       margin: 0;
11       padding: 0;
12     }
13     html,body{
14       height: 100%;
15       display: flex;
16       flex-direction: column;
17     }
18     .header,.footer{
19       height: 100px;
20       background-color: #3a9;
21     }
22     .body{
23       /* flex: 1; */
24       flex-grow:1;
25       flex-shrink:1;
26       flex-basis: 0;
27       overflow: scroll;
28       background-color:yellow;
29     }
30     .test1{
31       height: 300px;
32     }
33     .test2{
34       height: 300px;
35       background-color: coral;
36     }
37     .test3{
38       height: 300px;
39       background-color: green;
40     }
41   </style>
42 </head>
43 <body>
44   <div class="header"></div>
45   <div class="body">
46     <div class="test1">1</div>
47     <div class="test2">2</div>
48     <div class="test3">3</div>
49   </div>
50   <div class="footer"></div>
51 </body>
52 </html>

 

posted @ 2019-03-20 12:46  gaoxuerong  阅读(1384)  评论(0)    收藏  举报