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

最新推荐文章于 2023-04-12 15:44:34 发布

weixin_30815469

最新推荐文章于 2023-04-12 15:44:34 发布

阅读量225

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/chenluomenggongzi/p/5964646.html

版权

 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>