Ryan Fait的粘性页脚非常好，但我发现它的基本结构缺乏*。

Flexbox版本

如果你足够幸运，你可以使用flexbox而不需要支持旧的浏览器，粘性页脚变得非常简单，并支持动态大小的页脚。

使用flexbox将页脚粘到底部的技巧是让同一容器中的其他元素垂直弯曲。所需要的只是一个全高度的包装元素，display: flex并且至少有一个兄弟的flex值大于0：

CSS：

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

display: flex;

flex-direction: column;

min-height: 100%;

}

article {

flex: 1;

}

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

min-height: 100%;

}

article {

-webkit-box-flex: 1;

-ms-flex: 1;

flex: 1;

}

header {

background-color: #F00;

}

nav {

background-color: #FF0;

}

article {

background-color: #0F0;

}

footer {

background-color: #00F;

}

如果你不能使用flexbox，我选择的基本结构是：

哪个不是很远：

让页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这要求页脚的高度是静态的，但我发现页脚通常具有静态高度。

HTML：

CSS：

#main-wrapper {

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

#main-wrapper {

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

header {

background-color: #F00;

}

nav {

background-color: #FF0;

}

article {

background-color: #0F0;

}

footer {

background-color: #00F;

}

在页脚固定的情况下#main-wrapper，您现在需要#main-wrapper至少达到页面的高度，除非其子项更长。这是通过做#main-wrapper有一个min-height的100%。你还必须记住它的父母，html并且还body需要和页面一样高。

CSS：

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

min-height: 100%;

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

min-height: 100%;

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

header {

background-color: #F00;

}

nav {

background-color: #FF0;

}

article {

background-color: #0F0;

}

footer {

background-color: #00F;

}

当然，你应该质疑我的判断，因为这段代码迫使页脚从页面底部掉下来，即使没有内容。最后一个诀窍是要改变由所使用的盒模型#main-wrapper，因此认为min-height的100%包括100px填充。

CSS：

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

box-sizing: border-box;

min-height: 100%;

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#main-wrapper {

box-sizing: border-box;

min-height: 100%;

padding: 0 0 100px;

position: relative;

}

footer {

bottom: 0;

height: 100px;

left: 0;

position: absolute;

width: 100%;

}

header {

background-color: #F00;

}

nav {

background-color: #FF0;

}

article {

background-color: #0F0;

}

footer {

background-color: #00F;

}

你有它，一个粘性页脚与你原来的HTML结构。只要确保footer's height等于#main-wrapper's padding-bottom，就应该设置好。

*我指手画脚既成事实的结构的原因是因为它设置.footer，并.header在不同的层次级别的元素，同时增加不必要的.push元素。