footer的各种写法

footer放置的最好情况

1.页面内容少，无法撑开，在可视窗口最底部

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

demo点这里~

css方法

position:

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

1.推拉推原理

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

div.push||.main[padding-bottom]||wrapper：after
复制代码

再次推开footer

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

以下三种写法均为此原理

1.1 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
}
复制代码

1.2 .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;
}
复制代码

1.3 .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; 
}

复制代码

2.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 -兼容性查询