页面或内容底部的页脚，以较低者为准

页面或内容底部的页脚，以较低者为准

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的结构存在缺陷是因为它在不同的层次结构上设置了

.footer

and

.header

元素，同时添加了不必要的

.push

元素。