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

我正在使用

display:table

属性实现粘性页脚，并具有以下功能：

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

以下是我目前拥有的一把小提琴：

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

---

您可以使用FlexBox，以及查看高度

.container{
显示器：flex；
弯曲方向：立柱；
证明内容：开始；
对齐项目：拉伸；
高度：100vh；
}
.标题{
flex:050px；
背景：浅蓝色；
}
.内容{
flex:1自动；
背景：浅灰色；
}
.页脚{
高度：100px；
背景：darkcyan；
}

---

@trichetriche的答案比我的好（我真的需要掌握flexbox！），但我用一点jQuery更新了你的小提琴。这可以被进一步提炼出来，但你可以看到现在发生了什么

它所做的只是获取标题高度和内容高度，如果它们小于窗口高度，则会相应地设置内容高度

$（文档）.ready（函数（）{
var h=$（“#标题”）.height（）；
var c=$（'#content'）.height（）；
var w=$（window.height（）；
如果（（h+c）

我最终使用了相同的代码，但是没有将所有元素都放在

容器中，而是将
页脚放在了外部。似乎很管用。这里是一个更新的小提琴：


*{
保证金：0；
填充：0；
}
正文，html{
宽度：100%；
身高：100%；
}
.集装箱{
宽度：继承；
身高：继承；
显示：表格；
背景：红色；
}
.货柜组{
宽度：继承；
}
.标题{
背景：暗射线；
}
.内容{
身高：100%；
背景：绿色；
}
.页脚{
背景：黄色；
}

标题
内容
页脚
相关代码直接属于您的问题，而不仅仅是在外部网站上。
中的内容。
未正确推压页脚替换
高度：100vh宽度<代码>最小高度：100vh
$(document).ready(function() {
    var h = $('#header').height();
    var c = $('#content').height();
    var w = $(window).height();

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