弹性盒子实现移动端的初始布局页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         #container {
13             height: 508px;
14             background: #1daeee;
15 
16             display: flex;
17             flex-direction: column;
18         }
19 
20         .con1 {
21             width: 100%;
22             height: 100px;
23             background: aqua;
24             border-bottom: 1px solid #444444;
25         }
26 
27         .con2 {
28             width: 100%;
29             flex: 1;
30             overflow-y: scroll;
31             overflow-x: hidden;
32             background: red;
33             font-size: 1000px;
34         }
35 
36         .con3 {
37             width: 100%;
38             height: 100px;
39             background: green;
40         }
41     </style>
42 </head>
43 <body>
44 <div id="container">
45     <div class="con1"></div>
46     <div class="con2">
47         <p>1</p>
48     </div>
49     <div class="con3"></div>
50 </div>
51 </body>
52 </html>

效果是

　　上下两块不随中间滑动而滑动

方法要点：

　　一，父类元素高度不能设置百分比

　　二，父类元素设置盒子模式 display : flex

　　三，上下两个子元素设置固定宽高

　　四，中间元素设置，flex：1 和overflow-y:scroll