在响应式布局中，往往会设置元素的百分比宽度，以适应视口大小的变化。在很多时候我们希望元素的宽高比不变，如果还是简单的将height写成百分比形式，往往渲染出来的结果是无论我们怎么改变窗口大小，height始终是min-height的值（看不见元素也是这个原因）。

我们知道百分比高度和宽度的计算都是基于父元素高度的。我们溯源到最顶的父元素——html，它的宽度是基于视口宽度的，但是它的高度却是基于内容的，这也就是为什么想通过百分比高度来使高度也响应式改变往往不可行的原因。

主要原理是padding的计算是基于父元素宽度的，我们以保持空div的height=width为例，可以像这样写：

当然如果用这种方式，你还得必须考虑内容所占的高度，所以一般不推荐这样写。

只要原理是在onresize事件中，通过clientWidth属性获取元素的可视宽度，并将其赋值给元素的height。有以下几种写法：