如何修复页面底部的页脚 - CSS

在网页设计中，页脚通常位于页面的底部，用于显示一些信息或者链接。但有时候可能会出现页脚无法正确显示在底部的情况，这时候就需要进行修复。本文就介绍如何使用CSS修复页面底部的页脚。

方法一：使用固定高度的底部区域

最简单的方法是设置一个固定高度的底部区域，然后将页面的主体内容区域设置为高度为100%，并且使用margin-bottom属性来避免内容区域覆盖底部区域。底部区域可以包含页脚和其他信息。

html, body {
  height: 100%;
}

.main {
  min-height: 100%;
  margin-bottom: 50px;
}

.footer {
  height: 50px;
}

在上面的代码中，我们首先将html和body元素的高度设置为100%，以确保它们占据整个浏览器窗口的高度。接着，我们设置.main区域的最小高度为100%，以确保它至少与浏览器窗口高度相等。同时，我们还将.main区域的margin-bottom属性设置为底部区域的高度，这样就能够避免内容覆盖底部区域。最后，我们将.footer区域的高度设为50px，以便显示页脚信息。

方法二：使用flex布局

另一种方法是使用CSS的flex布局，这种方法比较灵活，能够适应不同高度的底部区域和内容区域。

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

在上面的代码中，我们首先将html和body元素的高度设置为100%。接着，我们将.container元素的显示方式设置为flex，并且设置其flex方向为纵向，这样就能够让.main区域自动填满剩余的空间。同时，我们还将.container元素的最小高度设置为100%，以确保它至少与浏览器窗口高度相等。最后，我们将.footer区域的flex-shrink属性设置为0，这样就能够避免它被压缩成无法显示的状态。

总结

以上就是两种修复页面底部页脚的方法。方法一比较简单，但是比较死板，无法适应不同高度的页面。方法二比较灵活，能够适应不同高度的页面，但是需要使用比较新的CSS3的flex布局。根据实际情况进行选择即可。

注：本文代码片段返回以下Markdown格式的信息：

## 方法一：使用固定高度的底部区域

```css
html, body {
  height: 100%;
}

.main {
  min-height: 100%;
  margin-bottom: 50px;
}

.footer {
  height: 50px;
}

方法二：使用flex布局

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}