使用padding-bottom 实现高度自适应
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>height auto</title> 6 <!-- 加入meta viewport --> 7 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <style> 9 *{ 10 padding:0; 11 margin:0; 12 } 13 #box{ 14 height:45px; 15 width:100%; 16 background: #f30; 17 display:-webkit-box; 18 position:relative; 19 } 20 #logo{ 21 width:100px; 22 background: #f00; 23 height:45px; 24 display:block; 25 26 27 28 } 29 #nav{ 30 -webkit-box-flex: 1; 31 -moz-box-flex: 1; 32 -ms-box-flex: 1; 33 box-flex: 1; 34 } 35 #btn{ 36 width:50px; 37 background: blue; 38 } 39 .list{ 40 width:100%; 41 42 } 43 .list ul{ 44 display:-webkit-box; 45 list-style-type: none; 46 } 47 .list li{ 48 -webkit-box-flex: 1; 49 -moz-box-flex: 1; 50 -ms-box-flex: 1; 51 box-flex: 1; 52 background: #eee; 53 width:30%; 54 margin-right:3%; 55 /*设置高度为0 padding-bottom:30% 参考的也是父亲的高度*/ 56 height:0; 57 /*width/height*区域的图片高度*/ 58 padding-top:30%; 59 } 60 </style> 61 </head> 62 <body> 63 <!-- h1里面写文字 用text-indent 利用seo --> 64 <div id="box"> 65 <dix id="logo">logo</dix> 66 <div id="nav"></div> 67 <div id="btn"></div> 68 </div> 69 <div class="list"> 70 <ul> 71 <li><img src="" alt=""></li> 72 <li></li> 73 <li></li> 74 </ul> 75 </div> 76 </body> 77 </html>