RyanFait的粘性页脚非常好，但是我发现它的基本结构缺乏*。
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;}<div id="main-wrapper"> <header> here be header </header> <nav> </nav> <article> here be content </article> <footer> here be footer </footer></div>如果您不能使用flexbox，我选择的基本结构是：
<div > <div > <header > <div > </div> </header> <nav > <div > </div> </nav> <main > <div > <div > <div > </div> </div> <div > <div > </div> </div> </div> </main> <footer > <div > </div> </footer> </div></div>
并非离：
<div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer></div>
使页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这_要求_页脚的高度是静态的，但是我发现页脚通常是静态高度。
HTML：
<div id="main-wrapper"> ... <footer> </footer></div>
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;}<div id="main-wrapper"> <header> here be header </header> <nav> </nav> <article> here be content </article> <footer> here be footer </footer></div>在页脚固定到的情况下
#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;} <div id="main-wrapper"> <header> here be header </header> <nav> </nav> <article> here be content </article> <footer> here be footer </footer></div>当然，您应该对我的判断提出质疑，因为即使没有内容，此代码也会迫使页脚从页面底部掉下来。最后一个诀窍是要改变由所使用的盒模型
#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;} <div id="main-wrapper"> <header> here be header </header> <nav> </nav> <article> here be content </article> <footer> here be footer </footer></div>有了原始HTML结构的页脚。只是要确保
footer的
height是等于
#main-wrapper的
padding-bottom，你应该设置。
*我发现Fait的结构存在缺陷是因为它在不同的层次结构上设置了
.footerand
.header元素，同时添加了不必要的
.push元素。
