【CSS黑科技】CSS百分比实现高度占位自适应（margin/padding）

基本知识点

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

哈，top/left以父元素的width为参照物还好理解，但top/bottom不是以height更符合咱们的预期吗？有疑惑很简单，看官方解释：

 

 

 

举个栗子

咱们有个页面，以下图，若是是在PC端好办，容器的宽高都写死是多少px，这样即便图片加载不出来容器都不会变型。可是在移动端，因为各机型分辨率相差太大，写死px是绝对不可能的，终究还得靠百分比来实现的：

 

 

1. 一行2列的容器宽度设个50%吧，这样一行放俩容器，各占屏幕宽度一半，没问题。
2. 图片宽度设个100%取容器的宽度，没问题。
3. 容器高度无法设置啊，由于容器宽高的参照物不同，并且需求是高度与宽度一致，因此没法经过为容器高度设置百分比来达成，那就只能靠内容高度撑开了。
4. 容器的内容高度就是图片的高度，若图片是正方形，则图片高度与图片宽度一致，也即与容器宽度一致，看起来没问题是吧？实际上，在浏览器把图片加载出来之前，图片的高度是零，那可就没办法把容器撑开了，以下图所示：

 

 

这样一来，即便图片加载速度再快，也会有个高度撑开的过程，若是图片没有加载成功，那更惨，整个页面的结构都有可能会有问题，这确定会被测试同窗报bug的啦

如今问题很明显了，就是怎么不用图片能够撑开容器高度，并且是高度可控，好比宽高比是个1：2什么的

给容器设置padding-top/bottom

啦啦啦，上文说的padding-top/bottom的百分比值，是依赖父容器宽度的，这样容器的宽度和高度均可以统一同一个参照物了（父元素的宽度）

举个例子，图片宽高比是1：1，一行放2个容器

视觉结果以下：

 

容器的盒子模型以下：

 

 

从盒子模型能够看出，虽然容器的内容高度为0，但因为有了跟内容宽度一致的padding，所以总体视觉效果上像是被撑开了。咱们达成了最初的梦想

此方案浏览器兼容性很不错，惟一的缺陷是没法给容器设置max-height属性了，由于max-height只能限制内容高度，而不能限制padding！！以下这个项目：

 

 

这个头图是按宽高比设置的大小，可是还须要考虑横屏的状况，以下图：

 

 

咱们是不会轻易的狗带的！！

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

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

咱们再来看看此时的盒子模型：

 

 

完美，能够看出，此时容器的内容高度与内容宽度一致，妈妈不再用担忧我没法经过max-height来限制容器高度了。

上面那个项目也是这样解决了不能设置max-height的痛点

 

 

 

另外，使用margin的话须要考虑margin折叠的问题（参考代码BFC相关），padding则无此烦恼。

哈，容器就给你了，要往容器内添加内容，但不能添加额外高度，那只能是使用position:absolute啦~

 

最后，奉上sass以下：

position: relative;
    @if $type == true {
        &#{$ele}{
            content: '';
            display: block;
            width: 100%;
            padding-top: percentage($arg);
        }
    }@else{
        padding-top: percentage($arg);
    }   
}