css底部制作

固定底部布局

使用 position: fixed 将元素固定在视窗底部，适用于页脚或悬浮按钮等场景。关键代码示例：

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

粘性底部布局

通过 flexbox 实现内容不足时仍贴紧底部的布局，适合长页面。HTML 结构需包含外层容器、内容区和页脚：

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

底部对齐网格项

在 CSS Grid 布局中将特定项对齐到底部：

.container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}
.footer {
  grid-row: 2;
  background: #444;
}

底部阴影效果

为元素添加向上的阴影增强视觉层次：

.element {
  box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}

响应式底部边距

使用视窗单位动态调整底部间距：

.content {
  margin-bottom: 10vh;
}

底部边框分割线

创建细线分割效果：

.divider {
  border-bottom: 1px solid #eee;
  margin: 20px 0;
}

浮动底部元素

通过 absolute 定位实现相对父容器的底部对齐：

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  bottom: 10px;
  right: 10px;
}