1、很多人的想法应该是js获取，在动态改变高度。这样虽然可以，但是比较麻烦，今天分享一个，不用js就可以达到这样效果的方法。
2、
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 400px;
height: 400px;
}
.tt {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;;
}
.hh {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="tt">
<div class="hh">12</div>
</div>
</body>
</html>通过tt类就可以创建一个动态的一个宽高一样的区域。主要方法在于 padding-top：100%；当然了padding-bottom也是可以的。
要点：
1、.tt 类的宽度必须是%的形式。因为你要明白你是在动态的获取宽度（在变化）
2、如果要在里面放入照片。或者其他组件，就需要按照 定位的方式了，详情可以看上面的代码，不明白的可以留言。
如果感觉这篇文章对你有帮助，加个关注吧！！！
也可关注我的公众号，我们一起交流。
扫描二维码关注公众号，回复：
14868551 查看本文章
