sticky footers解决的问题是，当页面的内容不够长的时候，页脚块粘贴在视窗底部，如果内容足够长的话，页脚块会被内容向下推送。

我现在介绍的是相对复杂，但是兼容性最好的方案

首先看布局

重点说一下css

detail是最外层的包裹元素，需要给元素固定定位，height、width都是100%；并且让多出来的元素可以滚动查看，所以添加overflow:auto属性，弹层一般都是有颜色的，所以添加背景颜色为rgba(7,17,27,0.5)

detail-wrapper跟detail-close是同一级元素，.detail-close不多说是关闭按钮的盒子为了在屏幕内容不满一屏的时候显示在最下边，需要给元素添加负margin-top;detail-wrapper是内容的盒子设置最小的高度是屏幕的高度即min-height:100%;

重点是detail-main的样式添加，padding-bottom,这个属性是必须的，为了让关闭按钮不遮挡内容；

具体css样式如下

当内容未满一屏幕的时候的最终效果如下

当内容超过一屏幕之后的效果

最后给大家推荐一个网站来更深一层的学习sticky footers布局https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

补充：利用flex布局也可以实现同样的效果，代码如下

感兴趣的话可以查看我的另一篇文章，flex实战