html设置自适应宽度和高度,css实现div高度根据自适应宽度（百分比）调整

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

问题

用的最多的标签Div却不能做到自动调整(要么从父级继承，要么自行指定px，要么给百分比。但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例

解决方法

通过padding来实现此功能，宽度的自适应是根据viewport的width来调整的，比如{width：50%}就是浏览器可视区域的50%，resize之后也会自动调整。padding是根据viewport的width来调整的，巧就巧在padding-top和padding-bottom也是根据viewport的width来计算的，那么通过设置这个属性就能跟width达成某种比例关系了

我们首先指定元素的width为父级元素的50%,这个时候我们再设置element的height为0，padding-bottom:50%;

实例: .element{width:50%;height:0;padding-bottom:50%;background:#eee;}

element就就变成了一个宽度50%，高度为0(但是他有50%width的padding-bottom)的正方形了。

思考与总结

这样就可以通过设定父级元素father、我们需要的元素element、子级元素datail来实现任意情况下该需求