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实现粘性底部，确保内容不足时页脚仍停留在底部。将父容器设为display: flex并设置min-height: 100vh，内容区域用flex-grow: 1填充剩余空间。

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

Grid布局底部

使用CSS Grid划分页面区域，通过grid-template-rows定义布局结构。将页脚分配到固定行，主内容区域自动填充剩余空间。

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

底部对齐内容

在容器内对齐内容到底部，适用于卡片或侧边栏组件。设置容器为position: relative，子元素使用position: absolute配合bottom: 0。

.card {
  position: relative;
  height: 300px;
  border: 1px solid #ddd;
}
.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0,0,0,0.5);
  color: white;
}

响应式底部设计

结合媒体查询调整底部样式，适应不同屏幕尺寸。修改布局方式或隐藏/显示特定元素。

.footer {
  padding: 20px;
  font-size: 16px;
}
@media (max-width: 768px) {
  .footer {
    padding: 10px;
    font-size: 14px;
  }
  .footer-links {
    display: none;
  }
}