让页脚保持在底部位置的 CSS 解决方案

2023-10-16 18:27:53

让页脚保持在底部位置的四种 CSS 方案

前言

在网页设计中，让页脚始终位于页面最底部是一个常见的需求。无论页面内容的长度如何，页脚都应该固定在页面底部。这有助于保持页面的美观性和可用性，并确保重要信息始终可见。本文将介绍四种使用 CSS 实现这一效果的有效方法。

方法 1：使用 flexbox

html, body {
  height: 100%;
}

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

.main-content {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
}

此方法使用 flexbox 来创建灵活的布局，其中页脚被分配为一个固定的高度（auto）。主内容区域将占据剩余的可用空间。

方法 2：使用 calc()

body {
  height: 100vh;
}

.main-content {
  min-height: calc(100vh - 50px); /* 50px is the height of the footer */
}

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

此方法使用 calc() 函数动态计算主内容区域的高度，从视口高度中减去页脚的高度。页脚使用 position: absolute 定位在页面的底部。

方法 3：使用 CSS Grid

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-row: 1;
}

.main-content {
  grid-row: 2;
}

.footer {
  grid-row: 3;
}

此方法使用 CSS Grid 来创建网格布局，其中页脚占据网格的最后一行。网格的行大小自动调整以适应内容的高度，确保页脚始终位于页面底部。

方法 4：使用粘性定位

body {
  position: relative;
}

.main-content {
  padding-bottom: 50px; /* Height of the footer */
}

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 50px;
}