利用CSS使footer固定在页面底部的实例代码

在web开发中，经常需要使用footer作为页面的底部，但footer的位置可能会受到其他元素的影响，导致无法固定在底部。因此，下面将介绍利用CSS让footer固定在页面底部的实例代码。

1. 设置html和body元素的高度

要让footer固定在页面底部，需要先设置html和body元素的高度为100%。

html, body {
  height: 100%;
}

代码解释

这段代码设置了html和body元素的高度为100%。这样做是为了让这两个元素铺满整个页面，为后面设置footer的位置打下基础。

2. 设置页面容器的最小高度

为了保证页面内容的高度能够撑满整个页面，需要给页面容器设置最小高度。

.page-container {
  min-height: 100%;
}

代码解释

这段代码给页面容器设置了最小高度为100%。如果页面内容高度小于100%，则页面容器会自动撑开到100%的高度。

3. 设置footer的样式

为了让footer固定在页面底部，需要给它设置一些样式。

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
}

代码解释

这段代码给footer设置了以下样式：

- position: absolute;，使footer的位置相对于最近的有定位的父元素进行定位。

- bottom: 0;，将footer定位在页面的底部。

- width: 100%;，使footer的宽度撑满整个页面。

- height: 80px;，设置footer的高度为80像素。可以根据实际需要调整高度。

4. 解决内容溢出的问题

如果页面内容过多，可能会导致footer被内容遮挡。为了解决这个问题，可以给页面容器设置padding-bottom的值为footer的高度。

.page-container {
  min-height: 100%;
  padding-bottom: 80px;
}

代码解释

这段代码给页面容器设置了padding-bottom的值为80像素，与footer的高度相同。这样就可以避免内容遮挡footer了。

5. 完整代码示例

下面是完整的示例代码。

html, body {
  height: 100%;
}
.page-container {
  min-height: 100%;
  padding-bottom: 80px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
}

总结

在web开发中，footer作为页面的底部常常被使用。但是，由于一些原因，footer可能会受到其他元素的影响，导致无法固定在底部。通过本文介绍的方法，可以很容易地让footer固定在页面底部。同时，也可以学到一些CSS的基础知识，例如position、height、padding等属性的用法。