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>
