css底部制作

固定底部布局

使用position: fixed将元素固定在视窗底部，适用于页脚或悬浮按钮等场景。设置bottom: 0确保贴底，width控制宽度。

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

弹性盒子（Flexbox）布局

通过Flexbox的margin-top: auto实现内容撑满时页脚自动下沉。父容器需设为display: flex和flex-direction: column。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  background: #222;
  padding: 20px;
}

网格（Grid）布局

CSS Grid通过grid-template-rows分配空间，主内容区域设为1fr占用剩余高度，页脚自动贴合底部。

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

底部对齐技巧

对于简单页面，可用calc()计算内容高度，或使用负边距抵消页脚高度。需确保HTML结构包含包裹容器。

.wrapper {
  min-height: calc(100vh - 60px);
  padding-bottom: 60px;
}
.footer {
  height: 60px;
  margin-top: -60px;
  background: #444;
}

响应式底部设计

结合媒体查询调整底部样式，例如移动端缩小高度或改变布局方向。使用相对单位如vh或百分比增强适应性。

@media (max-width: 768px) {
  .footer {
    height: auto;
    flex-direction: column;
  }
}