当前位置：首页 > CSS

css制作网页底部

2026-04-02 18:35:25CSS

固定底部布局

使用position: fixed将底部固定在视窗底部，适合需要常驻底部的元素（如导航栏）。示例代码：

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

粘性底部布局

通过min-height和margin-top实现内容不足时仍贴底。HTML结构需包含wrapper和footer：

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px; /* 与footer高度相同 */
}
.footer {
  height: 50px;
  background-color: #222;
  color: white;
}

Flexbox弹性布局

利用Flexbox的flex-direction: column自动将底部推至页面最下方：

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

Grid网格布局

通过CSS Grid定义模板区域实现：

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

响应式底部设计

添加媒体查询适应不同设备宽度：

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

常用样式增强

典型底部装饰样式参考：

css制作网页底部

.footer {
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  font-size: 14px;
  line-height: 1.6;
}
.footer a {
  color: #4CAF50;
  text-decoration: none;
}