真正的页脚！页脚贴在页面底部

2020-10-15 2,102 阅读1分钟

如图，正文不足页脚贴底。内容超出一屏，页脚挤出首屏。

上代码

<body>
  <div class="content">Content</div>
  <footer>footer</footer>
</body>

一. `position:sticky`实现

footer的高度不受限制
sticky 元素效果受制父元素(收到父元素overflow影响)

body {
  min-height: 100vh;
}
footer {
  position: sticky;
  top: 100vh;
}

二.`position: absolute;` 实现

footer高度需要确定

body {
  min-height: calc(100vh - 200px);
  padding-bottom: 200px;
  position: relative;
}
footer {
  height: 200px;
  position: absolute;
  width: 100%;
  bottom:0;
}

三. `flex` 实现

flex-grow: 1; 内容不足占用剩余空间

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
}