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>均匀分布</title>
8
9 <style>
10 .container{
11 width: 1000px;
12 margin: 50px auto;
13 border: 1px solid #ddd;
14 overflow: hidden;
15 /* padding: 10px; */
16 }
17
18 .box{
19 background: #0f0;
20 height: 200px;
21 /* width: 16%; */
22 width: calc(100% / 6);
23 float: left;
24 }
25 .box:nth-child(2){
26 background: #00f;
27 }
28 .box:nth-child(3){
29 background: #f00;
30 }
31 .box:nth-child(4){
32 background: #ff0;
33 }
34 .box:nth-child(5){
35 background: #f0f;
36 }
37 .box:nth-child(6){
38 background: #0ff;
39 }
40
41
42 body{
43 margin: 0;
44 }
45
46 html, body, .mobile{
47 height: 100%;
48 }
49
50 .header{
51 height: 45px;
52 background: #333;
53 }
54
55 .body{
56 display: block;
57 height: calc(100% - 85px);
58 overflow: auto;
59 }
60
61 .footer{
62 height: 40px;
63 background: #0f0;
64 }
65 </style>
66 </head>
67 <body>
68
69 <!-- <div class="container">
70 <div class="box"></div>
71 <div class="box"></div>
72 <div class="box"></div>
73 <div class="box"></div>
74 <div class="box"></div>
75 <div class="box"></div>
76 </div> -->
77
78 <div class="mobile">
79 <header class="header"></header>
80 <session class="body">
81 <h2>asdfasdfasdf</h2>
82 <h2>asdfasdfasdf</h2>
83 <h2>asdfasdfasdf</h2>
84 <h2>asdfasdfasdf</h2>
85 <h2>asdfasdfasdf</h2>
86 <h2>asdfasdfasdf</h2>
87 <h2>asdfasdfasdf</h2>
88 <h2>asdfasdfasdf</h2>
89 <h2>asdfasdfasdf</h2>
90 <h2>asdfasdfasdf</h2>
91 <h2>asdfasdfasdf</h2>
92 <h2>asdfasdfasdf</h2>
93 <h2>asdfasdfasdf</h2>
94 <h2>asdfasdfasdf</h2>
95 <h2>asdfasdfasdf</h2>
96 <h2>asdfasdfasdf</h2>
97 <h2>asdfasdfasdf</h2>
98 </session>
99 <footer class="footer">
100
101 </footer>
102 </div>
103 </body>
104 </html>
