Sticky Footer（粘性页脚）是一种网页设计中的经典布局方式，它的核心功能是实现页脚（footer）能够根据页面内容的长短智能地在页面底部显示或者固定在视窗的底部。当页面内容不足以填满整个视窗时，页脚会固定在视窗底部；而当页面内容超出了视窗高度，页脚则会随着页面内容滚动，位于内容的最下方。接下来，我们将详细介绍实现Sticky Footer的两种方式。
第一种方式是所谓的经典套路。这种方法依赖于CSS中min-height属性来实现。具体操作步骤如下：
在HTML结构上需要包含一个包裹层（.wrap）、内容层（.content）和页脚层（.footer）。然后，在CSS中对包裹层设置最小高度为100%，这样包裹层就会占满至少整个视窗的高度。接着，给内容层添加一个与页脚高度相等的padding-bottom，确保内容层底部留出足够的空间放置页脚。页脚层本身高度与内容层底部的padding相匹配，并添加一个与页脚高度相等的负margin-top，这样页脚就能回退到视窗底部的位置。
具体代码示例如下：
HTML结构：
```html
<div class="wrap">
<div class="content">
<p>填充内容</p>
</div>
</div>
<div class="footer">
<p>这是页脚</p>
</div>
```
CSS样式：
```css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body > .wrap {
min-height: 100%;
}
.content {
padding-bottom: 60px; /* 这里的60px应与页脚高度一致 */
}
.footer {
height: 60px;
width: 100%;
margin-top: -60px; /* 这里的-60px应与页脚高度一致 */
}
```
第二种方式是基于Flexbox布局实现的。Flexbox是CSS3中引入的一种新的布局方式，它让开发者能够以更加灵活的方式进行布局，特别适用于需要动态地分配空间的场景。利用Flexbox实现Sticky Footer的步骤相比传统方法更为简洁。
在HTML结构上，不需要设置包裹层，内容层直接跟在body后面。在CSS样式中，将body设置为flex容器，使其子元素按列（column）方向排列。内容层使用flex属性设置为占满剩余空间，这样当内容超出视窗时，页脚就会自然地固定在视窗底部。
具体代码示例如下：
HTML结构：
```html
<div class="content">
<p>填充内容</p>
<hr/>
</div>
<div class="footer">
<p>这是页脚@WiseWrong</p>
</div>
```
CSS样式：
```css
html, body {
display: flex;
height: 100%;
flex-direction: column;
margin: 0;
padding: 0;
}
.content {
flex: 1; /* 让内容层占用剩余空间 */
}
.footer {
/* 无需设置固定高度 */
}
```
在使用Flexbox方法时，不需要关心页脚的高度是多少，也不需要设置负的margin-top。这大大简化了CSS代码，并且为页面布局提供了更大的灵活性。
然而，需要注意的是，虽然Flexbox提供了一种优雅的解决方案，但它在IE9及以下版本的浏览器中并不支持，需要通过JavaScript或其他技术做兼容处理。而经典套路虽然在代码上看起来繁琐一些，但它的兼容性好，对老旧浏览器的支持更佳。
总结来说，实现Sticky Footer可以采用传统的方法或者新兴的Flexbox布局技术。在选择使用哪种方法时，需要考虑到项目的兼容性需求、开发效率、页面的可维护性等因素。随着现代浏览器对CSS3及新特性的广泛支持，越来越多的开发者倾向于使用Flexbox布局来实现这样的效果。
