1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>padding-bottom布局</title> 6 <style> 7 #q{width:800px; height:700px; background:#f45;} 8 #c{width:400px; height:350px; padding-bottom:50%; background:#00f} 9 .out{width:100%;height:300px;background:#f45;} 10 .a,.b{width:50%;background:#00f;padding-bottom: 10%; 11 float: left;} 12 13 </style> 14 </head> 15 <body> 16 <div id="q"> 17 <div id="c"> 18 SKJFLDKLKSAL; 19 </div> 20 </div> 21 22 <!-- padding-bottom的百分比的值是按照父元素宽度的值计算的 #q的宽度为800,c的padding-bottom值为50%;浏览器 23 解析后的值为400px; 24 一般的用法是父元素设置一个宽度，子元素设置自己的padding-bottom按百分比， 25 这种布局方法适用于这样一个情景；一个元素的背景需要全部显示出来，并且比例不变；随着屏幕大小变化； 26 要求本元素不会变形始终维持一个比例；通俗的讲就是让一个元素铺上背景，达到图片的显示效果; 27 1、一个元素的宽度值是父元素宽度值的百分比； 28 2、此元素通过设置padding-bottom的百分比，使其达到本元素的高度，按照父元素的宽度的值来计算； 29 --> 30 <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script> 31 <script> 32 33 </script> 34 </body> 35 </html>