自动填满屏幕剩余空间应用技巧之outline

自动填满屏幕剩余空间的应用技巧——outline

关键的css就是设置一个超大轮廓范围的outline属性，如给个9999px，保证无论屏幕多高，轮廓颜色都能覆盖
值得注意的是，outline无法指定方位，它是直接向四周发散的，所以需要配合clip剪裁来进行处理,以左边和上边为边界进行裁剪
.footer {
height: 50px;
}
.footer > p {
position: absolute;
left: 0;
right: 0;
text-align: center;
padding: 15px 0;
background-color: #00a1f5;
outline: 9999px solid #00a1f5;
color: #fff;
clip: rect(0, 9999px, 9999px, 0);
}

没错，我就是footer

摘取来源：
作者：chenhongdong
链接：https://juejin.im/post/5b406f40e51d45194832b759