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

Question

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

• 页眉和页脚高度未修复
• 内容始终是剩余高度的100％

这是我目前所拥有的一个小提琴：JSFiddle

一切都很完美，但我想要实现的是一个在屏幕上看不到的页脚，除非用户滚动。如果内容不足，页脚应该在窗口正下方，否则内容应该推送它。这是一张图片，解释了我的意思。左边是我现在所拥有的，正是我想要实现的目标。

Answer 1

你可以使用flexbox，以及它的视图高度！

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

Answer 2

@ trichetriche的答案比我的好（我真的需要掌握Flexbox！），但是我用一点jQuery更新了你的小提琴。这可以更多地提炼出来，但你可以看到它正在发生什么。

它只是获得标题高度和内容高度，如果它们小于窗口高度，则相应地设置内容高度。

Fiddle

$(document).ready(function() {
    var h = $('#header').height();
    var c = $('#content').height();
    var w = $(window).height();

    if((h + c) < w) {
        $('#content').height(w - h);
    }
});

Answer 3

我最终只使用了相同的代码，但我没有让container中的所有元素离开footer。似乎工作得恰到好处。这是一个更新的小提琴：JSFiddle

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body, html{
  width: 100%;
  height: 100%;
}
.container{
  width: inherit;
  height: inherit;
  display: table;
  background: red;
}
.container div {
  width: inherit;
}
.header {
  background: darkgray;
}
.content {
  height: 100%;
  background: green;
}
.footer {
  background: yellow;
}

＆＃13;

<div class="container">

  <div class="header">
    <h1>HEADER</h1>
  </div>
  
  <div class="content">
    <h1>CONTENT</h1><h1>CONTENT</h1><h1>CONTENT</h1>
  </div>
    
</div>

<div class="footer">
  <h1>FOOTER</h1>
</div>

＆＃13;

＆＃13;

＆＃13;