使用margin/padding的百分比值來解決自適應高度的關鍵在於：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那麼想要把這倆屬性的值統一起來就簡單了。
margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
body,html{width: 100%;height:100%;}
#box{height: 100%;width: 100%;background: #ccc;}
.marg{width: 40%;margin-bottom: 40%;position: relative;margin-left: 20px;float: left;}
.mar_ch{background: blue;position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 100%;}
</style>
<body>
<div id="box">
<div class="marg">
<div class="mar_ch"></div>
</div>
<div class="marg">
<div class="mar_ch"></div>
</div>
</div>
</body>
</html>
padding ————推薦使用padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
body,html{width: 100%;height:100%;}
#box{height: 100%;width: 100%;background: #ccc;}
.pad{width: 40%;padding-bottom: 40%;margin-left: 20px;float: left;background: #000;}
</style>
<body>
<div id="box">
<div class="pad">
</div>
<div class="pad">
</div>
</div>
</body>
</html>
