Html 即使内容框为空，也应扩展到页脚

我需要的内容框，以达到页脚，即使内容框是空的。我只想使用CSS实现这一点

填充底部

不是一个选项

我不想使用背景图像，例如

背景图像：url center repeat-y

我怎样才能做到这一点

.wrap{
身高：100%；
}
.l-柱{
填充顶部：0；
身高：100%；
}
.页脚{
位置：相对位置；
高度：60px；
明确：两者皆有；
浮动：左；
宽度：100%；
z指数：3；
}

内容

在这里，您只需计算您的最小高度，这样，如果内容变得更多，如果您不希望，它将扩展，只需使用常规高度即可

body{margin:0；}
.头，.脚{
宽度：100%；
背景：灰色；
高度：50px；
浮动：左；
显示：内联块；
}
.内容{
宽度：80%；
最小高度：计算（100vh-100px）；
背景：浅灰色；
浮动：左；
显示：内联块；
}

头部
你好
foot

flex+html5，看起来像一个学校案例

html{
显示器：flex；
身高：100%；
}
身体{
弹性：1；
显示器：flex；
柔性流动：柱；
颜色：白色；
}
页眉、页脚{
文本对齐：居中；
背景：#4F81BD；
线高：4em；
}
主要{
弹性：1；
显示器：flex；
证明内容：中心；
左侧填充：10%；/*原因旁边设置为10%宽度*/
}
部分{
边框：30px#4F81BD实心；
填充：1em；
保证金：2倍；
框阴影：0 0 2px，插入0 0 2px；
宽度：60%；/*任意*/
颜色：#385D8A
}
旁白{
背景：#4F81BD；
盒影：0 2px#385D8A；
保证金：自动0；
宽度：10%；
最小高度：30vh；/*演示目的，请使用内容*/
显示：flex；/*可选在XY轴上居中*/
对齐项目：居中；
证明内容：中心；
}

收割台（任意高度）
节，以整页模式运行代码段并调整窗口大小
在一边
页脚（任意高度）

使用CSS函数，您可以使用计算内容div的最小高度

正文{
保证金：0
}
.标题，
.页脚{
宽度：100%；
高度：60px；
背景颜色：灰色；
}
.内容{
宽度：100%；
最小高度：计算（100vh-120px）；
背景色：#FFF8DC；
}

标题
内容
页脚

我们可以看到CSS/HTML吗？height+flex很容易做到这一点，向我们展示您使用jQuery尝试过的内容（HTML结构和CSS方法）。这非常容易做到，但您的问题只涉及CSS。你在项目中使用jQuery吗？是的，我也在使用jQuery。但是对于这种情况，我想将解决方案限制为CSS。如果您有一个jQuery解决方案，请也分享一下@Acidic@Bob以下是完成此操作所需的所有jQuery代码。