详解CSS经典布局之Sticky footer布局

何为Sticky footer布局？

我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。是不是很容易理解。不理解的小伙伴也没关系下面我就举个简单的例子。

举个栗子

当内容较少时，正常的文档流显示如下图：

在正常文档流中，当内容较少时，页脚部分不会始终固定在屏幕的最下方。这时候就该让传说中的sitcky footer布局出现了。

sticky footer布局效果如下图所示：

不管内容区有多少内容，页脚始终显示在屏幕的最下方，当内容区域超过屏幕的高度时。页脚会始终显示在页面的最底部。现在小伙伴们彻底认识sticky footer的真面目了吧，下面让我们一起看看它是如何实现的。

Sticky footer布局实现

负margin布局方式

html代码：

css代码：

注：main里的 padding-bottom和footer里的负margin值要保持一致。

flex布局方式