css底部制作

固定底部布局

使用position: fixed将元素固定在浏览器窗口底部，适用于页脚或悬浮按钮等场景。设置bottom: 0确保贴底，width: 100%保持全宽。

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

Flexbox 弹性布局

通过Flexbox实现动态底部布局，容器设为min-height: 100vh撑满视口高度，内容区用flex-grow: 1自动扩展，页脚自然下移。

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

Grid 网格布局

CSS Grid的grid-template-rows分配空间，将页脚锁定在网格末端。auto 1fr auto表示页眉内容区页脚的三段式结构。

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

底部对齐技巧

对内容较少的页面，可用margin-top: auto将页脚推至底部。需配合Flexbox或Grid使用，确保父容器有足够高度。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
  background: #555;
  padding: 10px;
}

响应式底部设计

使用媒体查询调整底部样式，小屏幕时减少内边距，改变布局方向。确保在不同设备上保持可用性。

.footer {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    padding: 10px;
  }
}