Footer布局

本文将继续介绍footer如何定位到页面最下放，已不止于内容少的时候悬空，从而影响美观。

也许很多人对footer还不是很了解，那么看下图应该有点点印象了。这个是在开发网站或者web项目中很常见的问题，例如在分辨率高点的电脑上一个登录页面展示，版权就或浮到页面中间来，下面就悬空了，及其影响美观，那么如何解决呢？

image001.jpg

一、 方法一使用容器使用负的margin-bottom
首先是个包裹除了footer之外其他元素的容器，然后容器内有个占位元素，以及使用负的margin-bottom,他们的绝对值相等。

结构代码如下

  content

<div class="push"></div>

样式如下

html, body {

height: 100%;

margin: 0;

}

.wrapper {

min-height: 100%;

margin-bottom: -50px;

}

.footer, .push {

height: 50px;

}

二、 方法二底部使用负的margin-bottom
方法在容器上使用负的margin-bottom，同理可得负的margin-top加自身

结构代码如下

<div class="content-inside">

  content

</div>

样式代码

html, body {

height: 100%;

margin: 0;

}

.content {

min-height: 100%;

}

.content-inside {

padding: 20px;

padding-bottom: 50px;

}

.footer {

height: 50px;

margin-top: -50px;

}

三、方法三用calc动态计算
这个是利用动态函数计算，低版本浏览器不推荐，版本支持如下图所示

image002.jpg

结构代码如下

content

样式代码

.content {

min-height: calc(100vh - 70px);

}

.footer {

height: 50px;

}

calc中的 70px和footer高度50px是假定了content中最后一个元素有个20px的margin-bottom，也就是间距，如果你要完全贴在一起也可以值相等。

四、方法四flexbox可延伸方式
此方法也是css3中有的属性，需要浏览器支撑，大致浏览器支撑与方式三的差不多。

结构代码如下

content

样式代码

html {

height: 100%;

}

body {

min-height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

}

原理是flex: 1使得content的高度可以自由伸缩。

五、 方法五grid容器网格布局
grid比flexbox还要新很多，使用grid同样很简洁，遗憾的是现在Chrome Canary 或者 Firefox Developer Edition才能看到效果。

结构代码如下

content

样式代码

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
【总结】

   为了能快速而又美观的开发出最优的web系统，以上方式方法根据项目中需要支持的浏览器进行选择，希望能帮到大家。转自 http://www.learnfuture.com/article/1991