前端必懂之Sticky Footer(粘性页脚)
什么是Sticky Footer？
页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。
- 当内容较少时，正常的文档流效果如下图
在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，这时就要用到Stickyfooter布局。
- Sticky footer布局效果如下图
这样就符合我们的预期效果，可以看出Sticky footer布局的应用场景还是非常广泛的。
html代码
<body>
<div class="wrapper">
<div class="content">内容区域</div>
</div>
<div class="footer">底部区域</div>
</body>
然后添加以下样式：
html, body, .wrapper { height: 100%; } body > .wrapper { height: auto; min-height: 100%; } .content { padding-bottom: 150px; /* 必须使用和footer相同的高度 */ } .footer { position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both; }
注意:
content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。
另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
demo， html,body,wrapper,高度必须要100%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html, body, .wrapper { height: 100%; padding: 0; margin: 0; } body > .wrapper { height: auto; min-height: 100%; background: #f00; } .content { padding-bottom: 200px; font-size: 30px; } .footer { position: relative; margin-top: -200px; /* footer高度的负值 */ height: 200px; clear: both; width: 100%; color: white; background: black; font-size: 20px; } .clearfix { display: inline-block; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style> </head> <body> <div class="wrapper clearfix"> <div class="content"> <p>这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？ 如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话，这里有一些受欢迎的文章，提供</p> <!-- <p>这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？ 如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话，这里有一些受欢迎的文章，提供</p> <p>这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？ 如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话，这里有一些受欢迎的文章，提供</p> --> </div> </div> <div class="footer"> 这似乎略优于现有的固定高度的解决方案，主要是由于其简单。然而，除了简单的布局，但这是不切合实际。它要求我们每次都要计算包裹页脚文本容器的高度，这样我们需要每次计算容器的min-height。除非我们愿意添加HTML容器来包裹我们的标题和内容，不过同意也要计算。当然，在这个时代，我们可以做得更好，对吗？著作权归作者所有。 </div> </body> </html>
