本文主要包含css sticky footer,sticky footer,css sticky,css footer,footer布局等相关知识,初漾的博客希望在学习及工作中可以帮助到您
使用场景：如果页面内容不够长时，内容块粘贴在视窗底部；如果内容足够长，页面块会被内容向下推送。
比如：叉号按钮定位在底部
固定的套路：包括两个层：内容的包装器，定在底部的层。
<style>
/*所有clearfix写法均是如此，作用：清除浮动*/
.clearfix{
display: inline-block;
}
.clearfix::after{
display: block;/*必写*/
content: ".";/*必写*/
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
.detail-wrapper{
min-height: 100%;
}
.detail-wrapper .detail-main{
margin-top: 64px;
padding-bottom: 64px;/*关键：给底层预留空间，必须设置，否则footer会覆盖内容区*/
}
.detail-close{
position: relative;
width: 32px;
height: 32px;
margin: -64px auto 0 auto;//关键，通过负margin将footer定位在底部
clear: both;
font-size: 32px;//设置图标字体
}
</style>
</head>
<body>
<div class="detail-wrapper clearfix">//对内容层的包装，作用：最小高度撑满整个屏幕，否则按钮不会出现在底部
<div class="detail-main"></div>//内容层
</div>
<div class="detail-close">//底层
</div>
</body>