CSS百分比实现高度自适应（margin/padding）

基本知识点

本文依赖于一个基础却又容易混淆的css知识点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

MDN

1. 给容器设置padding-top/bottom

padding-top/bottom的百分比值，是依赖父容器宽度的，所以给子元素设置一个与父元素高度相同百分值的padding-top即可实现。

div {
  border: 1px solid red;
  background: green;
  width: 50%; /*父元素宽度一半*/
  padding-top: 50%; /*与width一样，为父元素宽度一半*/
}

视觉效果如下：

image.png

此方案浏览器兼容性很不错，唯一的缺陷是无法给容器设置max-height属性了，因为max-height只能限制内容高度，而不能限制padding，为了解决这个问题我们可以选择下面这个办法。

2. 给子元素/伪元素设置margin/padding撑开容器

从上面的方案的盒模型看出max-height失效的原因是容器的高度本来就是padding撑的，而内容高度为0，max-height无法起作用。那想要优化这一点，唯一的方法就是利用内容高度来撑开而非padding，这个方案跟消除浮动所用的方案非常相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的pading/margin设为100%，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度达成我们预想的宽高比(1:1)了。由于添加子元素与HTML语义化相悖，因此更推荐使用伪元素:after来实现此方案。

div {
  border: 1px solid red;
  background: green;
  width: 50%; /*父元素宽度一半*/
}

div::after {
  content: '';
  display: block;
  margin-top: 100%;
}

使用该方法可能需考虑margin折叠的问题，可在父元素上加overflow:hidden触发BFC解决。