[CSS学习笔记] 高度自适应占位小技巧

CSS 中padding/margin的小知识

今天看到几篇关于css的一些运用的文章，讲的是当padding/margin值为百分比时，其值都是以其父元素的宽度为参照对象。也就是说，当取值为百分比时，padding-top/padding-bottom同样是以其父元素的宽度为基准计算的，这与我们的直觉相违背。当然了，CSS由规范文档定义，我们只需要了解并保证能够正确使用它。

元素定位

回想起上周做的仿首页作业时，其中有一个轮播组件的pagination就是通过padding-top取百分比，保证轮播按钮始终处于页面中正确位置。根据前面的知识现在明白了为什么这里可以使用padding-top 实现定位。

组件截图

---

那么，这个属性处理可以在用于自适应定位外还能干什么呢？

高度自适应占位

阅读文章参考文章，padding-top/bottom可以用于图片自适应占位，解决页面闪烁的问题。他是怎么实现的呢？

首先我们假设有一个容器需要包裹一个图片，这个容器我们不设置其高度，以保证其自适应。此时，当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会再图片加载完成后出现闪烁的情况。

通过padding-top 撑起一个容器

通过给容器添加一个值为百分比的padding-top，这个容器被撑了起来，同时该属性值取决于父容器的宽度，此时该容器会随着父容器宽度变化而拿到一个撑起内容的高度，我们只需要根据需要的内容比例设置padding-top的值即可。同样，padding-bottom也是可行的。

#container{
  background-color: red;
}
.placeholder{
  padding-top:50%;  
}

被padding-top撑起的容器

以上的方法存在一个问题，使用该方法容器的max-height属性会失效，其原因在于max-height仅对内容高度生效，即使我们使用box-sizing:border-box，同样会有这个问题，同时padding会占据了一个位置，显然无法满足我们的需求。
既然max-height仅对内容生效，那么通过给容器添一个子元素作为内容填充，是否可行呢？

通过伪元素撑起容器

参考清除浮动的方法，我们尝试给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度。

#container{
    width: 50%;
    max-height:40px;
    background-color:#ddd;
}
.placeholder::after{
    content:"";
    padding-top:100%; 
    display:block;
}

伪元素使用padding-top

又或者使用margin-top/margin-bottom：

#container{
    width: 50%;
    max-height:40px;
    background-color:#ddd;
    overflow:hidden;
}
.placeholder::after{
    content:"";
    display:block;
    margin-top:100%;
}

伪元素使用margin-top

需要注意的是，由于margin存在塌陷的问题，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个 overflow:hidden来保证伪元素的margin不会塌陷。

给容器添加内容

最后一个问题，由于伪元素仍占据了一个位置，要使得容器内容能够正确添加图片/文本，我们只需要使容器内部元素绝对定位即可。

例如我们给容器里面添加一个图片：

#container{
    width: 50%;
    max-height:300px;
    background-color:#ddd;
    overflow:hidden;
    position: relative; /* 父容器相对定位 */
}
.placeholder::after{
    content:"";
/*     padding-top:100%;  */
    display:block;
    margin-top:100%;
}
img{
    position:absolute;  /* 内容绝对定位 */
    left: 50%;
    top: 50%;      
    transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */
    width:80%;   /* 控制图片不溢出，因此这里使用的图片实际宽度受父容器影响 */
}

添加一个图片

这里我们只需要保证内容的宽度响应父容器的宽度，比如例子中的图片 width:80%，以及绝对定位的位置，我们就可以根据需求填充内容。

到这里高度自适应占位基本完成，至于具体的宽高比例则由实际需求决定，我们只需要控制margin/padding的百分比值即可。

例子：
http://jsbin.com/geqoqam/2/edit?html,css,output

参考来源
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
纯 CSS 实现自适应正方形