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 /* 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>