css如何实现宽度不固定的容器，要求其高度等于宽度

因移动设备屏幕尺寸不一致，为兼容不同的设备，我们一般用响应式布局。那么问题来了，有这样个需求：一个容器（div），宽度为可视区域的80%，要求其高度等于宽度。

通常我的做法，是用js实现：先获取容器的宽度值，然后把该值赋值给容器的高度。
这并没有多大难度，有难度的是知道怎样用css实现该功能。

接下来是重点了，不要离开哈，继续往下看。

答案很简单：容器的padding 比例值是相对于容器的宽度值来计算的，在宽度不固定的情况下，要实现宽高相等或固定比例，用padding-bottom:*%，即可实现。

示例：实现宽高相当

//html结构：
<div class="box"></div>

//css样式：
.box{
    width:100%;
    padding-bottom:100%;
    border:solid 1px red;
}

实现效果如下图所示：