已知子div的高度是80%，如何设置使得该div为正方形？

Question

如题：

已知子div的高度是80%，如何设置使得该div为正方形？

补充：

背景是这样的，前天去面试，问我宽度为80%，如何使得变成正方形，答案是padding-top：80%，这个好理解。但是面试官然后反问我，如果是高度是80%呢，怎么使得变成正方形。

当时我没有意识到他这么问，其实是隐藏了一个条件，就是父div是固定的(宽度仍然是不固定的)。当时我没答出来。

Answer 1

最简单的
.div{

width:80vh;
height:80vh;

}

Answer 2

<style>
   .box{
          height: 500px;
          width: 500px;
          display: flex;
          align-items: center;
          justify-content: center;
          border:  solid 1px;
      }
      .child {
          height: 80%;
          padding-left: 80%;
          background: blue;
      }
</style>

<div class='box'>
  <div class='child'></div>
</div>

Answer 3

已知你儿子高一米八，请问你叫什么名字？