HTML 中固定 footer 的方法

Mon, 02 Jan 2017 20:55:43 +0000

有时在 Html 中我们需要固定底部的版权信息等内容，期望的展示方式是页面撑满浏览器，最下方是 footer 的内容。

<div class="main">
  <div class="content">
    ...
  </div>
  <footer>版权所有</footer>
</div>

如到所示，我们希望的是footer永远占据页面的最下方，而content内容则填满页面的其他部分。

想当然的方法

想当然的方法去实现，是直接将div.main部分的height设置为100%，这样可以直接撑满页面，虽然在内容少的时候确实达到了我们想要的效果，但弊端也十分明显——在页面内容多于一页的时候，内容会展示不全，因为设置了固定的height，所以内容并不会将div.main进一步撑开。所以这样是不行的。

使用`min-height`

Html 中可以使用min-height来指定内容高度。根据这个思路我们可以将div.conent的min-height设置为80%，同时将footer的min-height设置为20%。

然而这个解决方案看起来很完美，实际上用起来的时候还是会有问题，原因如下：

一个元素如果要指定min-height，那么它的父元素必须指定height，指定min-height也无济于事。也就是说div.main必须指定height这一属性。然而还是那个height不能自动变大的问题。

最终方案——使用`position`

那么最终的解决方案应该怎样呢？答案是使用position

先给出最终的Html和CSS代码：

<div class="main">
  <div class="content">
    ...
  </div>
  <footer>版权所有</footer>
</div>

div.main {
  min-height: 100%;
  position: relative;
  padding-bottom: 10rem;
}

footer {
  height: 10rem;
  position: absolute;
  bottom: 0;
}

首先将div.main的最小高度设置为100%，随后将其位置指定为relative；随后指定footer的位置为absolute，这样footer会相对于上一个位置被指定为relative的元素进行布局，随后bottom: 0;将footer设置在了div.main的最下方。

当然不要忘记了div.main需要有一个padding-bottom，大小等于footer的高度，这样内容才不会错位。

到此我们就实现了最完美的固定footer的样式。

Html on 轻语慕心

HTML 中固定 footer 的方法

想当然的方法

使用min-height

最终方案——使用position

使用`min-height`

最终方案——使用`position`