【CSS 布局】 Sticky Footer布局

/* 基本的 HTML 和 Body 样式 */
html, body {
  height: 100%;
  margin: 0;
}
 
/* 创建一个容器来包含所有内容 */
.container {
  min-height: 100%;
  position: relative;
  padding-bottom: 60px; /* 页脚高度 */
}
 
/* 页脚样式 */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* 设置页脚高度 */
  background-color: #f5f5f5;
}
 
/* 主要内容区域样式 */
.content {
  padding: 20px; /* 内边距 */
  margin-bottom: -60px; /* 与页脚的高度相反 */
}

这段代码实现了一个简单的 Sticky Footer 布局，其中 .container 是所有内容的容器，.footer 是页脚区域，.content 是主要内容区域。通过设置 .container 的 padding-bottom 等于 .footer 的高度，并且在 .content 中设置了一个负的 margin-bottom 来抵消 .container 的 padding-bottom，从而保证即使内容不足以填满视口高度时，页脚也会始终在视口底部。