css页脚制作

固定底部页脚

使用 position: fixed 将页脚固定在视窗底部，适合内容较少的页面：

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

注意：内容过长时可能遮挡页面，需为正文添加底部内边距（如 padding-bottom: 50px）。

弹性布局页脚

通过 Flexbox 实现页脚动态适配，适合现代浏览器：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1; /* 占据剩余空间 */
}
footer {
  background: #222;
  color: #fff;
  padding: 20px;
}

此方法确保内容不足时页脚仍位于底部，内容多时自动下推。

网格布局页脚

使用 CSS Grid 布局控制页脚位置：

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}
footer {
  grid-row: 3;
  background: #444;
  padding: 15px;
}

grid-template-rows 中的 1fr 让主内容区自动填充空间。

响应式页脚设计

结合媒体查询适配不同设备：

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: #555;
  padding: 20px;
}
@media (max-width: 600px) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}

移动端切换为垂直布局，提升可读性。

页脚内容样式建议

• 链接样式：

  footer a {
    color: #ccc;
    text-decoration: none;
  }
  footer a:hover {
    color: white;
  }

• 版权信息：使用 small 标签并减小字号：

  footer small {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
  }

根据项目需求选择合适的方法，Flexbox 和 Grid 方案更适合动态内容页面。