点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

说到自适应显示，宽度好处理一点，将width设个百分比就行了，其实高度要做自适应，甚至按比例显示也不难，估计大家都这么处理过。

一句必须知道的话：

上面这张图是当padding-top设为百分比时在W3C上给出的定义，基于父元素宽度。对的，我们也就是用padding-top来实现高度自适应显示。

一、DEMO分析：

当高度不确定的情况下，实现一个高度自适应的DIV

HTML结构：

CSS结构：

从上面样式中可以看到，我将子元素padding-top设置成50%，没有高度，通过padding值将它撑起来，表现就是父元素60%宽度的一半，通过设置一个红色背景将它突显出来。这样就实现了高度自适应了。

效果图是这样的：

但是这种写最大高度不可控，父元素会随着屏幕变宽而变大，高度也随之变高。请往下看......

二、实例应用：

当高度不确定的情况下，实现一个按例如4：3显示的DIV

利用伪元素来处理，样式是这样的：

这样的话margin-top就是相对div.placeholder来处理的，这样变化小些就可控一点，75%刚好就是4：3的比例，如果我们div.placeholder里加一张图片（img），然后将图片设一个绝对定位，宽度设个100%，高度设个auto，如此一来，是不是和我们平时的某些需求相符了，其中图片还可以按实际要求去处理。

效果图是这样的：

总结：

高度自适应的实现原理就是一句话：padding-top设为百分比时，是相对于父元素的宽度。