html - 仅在窗口下方显示的粘性页脚

Question

我正在使用 display: table 属性来实现具有以下功能的粘性页脚:

• 页眉和页脚高度不固定
• 内容始终为剩余高度的 100%

这是我目前拥有的 fiddle :JSFiddle

一切正常，但我想要实现的是屏幕上不可见的页脚，除非用户滚动。如果没有足够的内容，页脚应该在窗口的正下方，否则内容应该推送它。这是一张解释我实际意思的图片。左边是我目前拥有的，右边是我正在努力实现的目标。

Answer 1

您可以使用 flexboxes 以及 View 高度!

.container {
  display: flex; 
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  height: 100vh;
}

.header {
  flex: 0 0 50px;
  background: lightblue;
}

.content {
  flex: 1 1 auto;
  background: lightgrey;
}

.footer {
  height: 100px;
  background: darkcyan;
}

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