固定页脚

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

<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;
}

使用 ​​flex​​

使用 CSS ​​flex​​，布局实现如下：

.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;
}

更多资料

• ​​Sticky Footer, Five Ways​​
• ​​A Clever Sticky Footer Technique​​