假设我们的页面由三部分组成：页眉、主要内容和页脚。无论主要内容有多长，页脚总是显示在底部是一种常见的布局。

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

基本样式：

html, body, .container {
  height: 100%;
}

body {
  margin: 0;
}

使用 margin

  • 内容区域的 margin-bottom 为负值 
.content {
  min-height: 100%;
  margin-bottom: -50px;
}

.footer {
  height: 50px;
}
  • 页脚的 margin-top 为负高度大小 
main {
  min-height: 100%;
}

footer {
  height: 50px;
  margin-top: -50px;
}

使用 calc() 

main {
  min-height: calc(100% - 50px);
}

footer {
  height: 50px;
}

使用 flexbox

使用 CSS flexbox，布局实现如下：

.container {
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1
  /* flex: 1 0 auto; */
}

footer {
  flex-shrink: 0;
}

设置 flex-grow: 1 为主要内容将使其占用可用空间。

或者使用 margin: auto：

.container {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

使用 grid 

.container {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr auto;
}

查看效果

sticky

footer {
  position: sticky;
  top: 100vh;
}

更多资料