footer的各种写法

** footer放置的最好情况：**
1.页面内容少，无法撑开，在可视窗口最底部

页面内容少

2.页面内容多，在页面最底部

页面内容多
** demo点这里~ **

css方法

position:

• fixed 固定在可视窗口最底部
• absolute 显示在可视窗口的最底部
• relative 显示在页面的最底部 （和什么都不写一样，因为内容会直接将footer挤在底部）
  缺点：使用position，不能在内容多的时候显示

推拉推原理

步骤
1.设置div.wraper高度为整个网页，
2.将推到下一页的footer使用margin-bottom拉回
3.为避免设置了负边距的页面内容与footer重叠，所以使用

div.push||.main[padding-bottom]||wrapper：after

再次推开footer

为元素设置负外边距。这会导致元素超出其父元素，或者与其他元素重叠，但并不违反框模型。

以下三种写法均为此原理

footer高度为58px

div.push写法

html结构

<div class="wrapper">
    <div class="main" id="main"></div>
    <div class="push"></div>
</div>
<footer class="footer">
    <p>© 2015 深圳波纹聚联网络科技有限公司</p>
    <a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>

css结构

/*div.push 写法*/
html, body {
height: 100%;
}

.wrapper-add{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -58px; 58px为footer的高度+margin
}

.main[padding-bottom] 写法

html结构

<div class="wrapper">
    <div class="main" id="main"></div>
</div>
<footer class="footer">
    <p>© 2015 深圳波纹聚联网络科技有限公司</p>
    <a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>

css结构

/*margin 写法*/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -58px;
}
.main{
    padding-bottom: 58px;
}

.wrapper：after写法

html结构

<div class="wrapper">
    <div class="main" id="main"></div>
</div>
<footer class="footer">
    <p>© 2015 深圳波纹聚联网络科技有限公司</p>
    <a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>

css结构

/*after 写法*/
html, body {
height: 100%;
}
.wrapper{
  min-height: 100%;
  margin-bottom: -58px; 
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  height: 58px; 
}

flex

<div class="main" id="main"></div>
<footer class="footer">
    <p>© 2015 深圳波纹聚联网络科技有限公司</p>
    <a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>

css写法

/*flex写法*/
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

注意：vh兼容性表，兼容性还不错，只是安卓4.3以下都不兼容。

红色为不兼容 黄色为部分兼容 绿色为兼容

** demo**

js方法

计算高度，设置footer的位置。

综上，如果内容多的话，不去捣鼓footer也行，当内容不确定的时候，推拉推方法可以一直保持在页面内容的最底部。

参考资料

• 设置after （Sticky Footer 此插件实现原理）
• 用CSS固定footer在底部的疑问?
• 网页中的底部foot一般是如何定位的？
• caniuse -兼容性查询