Javascript 粘性页脚+；100%高度+；他们之间的差距

我的总体目标是在100%高度的内容和粘性页脚之间留一个空白；通过它显示身体背景的一种

现在，我使用jQuery计算文档的高度，减去页脚的高度加上一个边距，然后将新的大小应用于ID为“content”的DIV

然后，我使用jQuery的resize（）函数在视口大小改变时也调整div的大小，因此，如果用户调整浏览器窗口的大小或放大，div的大小将自动更新

不幸的是，当我在缩放中切换方向（即放大后缩小，反之亦然）时，Javascript无法识别视口的大小调整，使我在内容上的背景太长或太短。此外，此调整大小不会识别内容。我正在考虑在CSS中设置最小高度，但如果有办法用Javascript实现，我洗耳恭听

我会接受纯CSS和HTML解决方案，因为这似乎是可能的，但我已经用尽了自己寻找答案

我当前的Javascript（运行jQuery库1.7.2）：

任何方向都非常感谢

编辑

---

明白了，没有Javascript

我在小提琴上做了些东西。 在我看来这就是你想要的

请查看： 橙色：内容 灰色：页脚

重要的是给你的身体和身高：100%；财产。 正如您将看到的，当您添加更多文本时，内容div会自动增长（甚至超过100%）， 尽管内容和页脚之间的25 em边距始终保持不变

---

我故意在内容和页脚之间留了一个很大的空白，以便你们能看到它的效果：）

我在小提琴上做了一些东西。 在我看来这就是你想要的

请查看： 橙色：内容 灰色：页脚

重要的是给你的身体和身高：100%；财产。 正如您将看到的，当您添加更多文本时，内容div会自动增长（甚至超过100%）， 尽管内容和页脚之间的25 em边距始终保持不变

---

我故意在内容和页脚之间留了一个很大的空白，这样你就可以看到它的效果：）

我非常感谢你在这方面所做的努力。我添加到您的JSFIDLE中，希望能更清楚地说明我想做什么。我想有一个“空白”之间的内容和页脚，以便身体的背景将显示通过。我有一些疯狂的背景渐变/图像动作在进行，我不能通过将背景绝对定位在内容底部或诸如此类的东西来“伪造它”；因此，我需要那种空白的、透明的“页边空白”排序，或者任何必要的东西来分隔页脚和内容。。这很难。请看这里：。也许你可以把这些代码和你现在拥有的结合起来，我看到了并试图实现它。这似乎对粘脚不起作用；但我可能没有正确地使用它。我再试试。砰。明白了，多亏了你的评论。你真的帮了我的忙！。。。但当内容超出视口时，它不起作用。我会继续捣乱的。我非常感谢你在这方面的努力。我添加到您的JSFIDLE中，希望能更清楚地说明我想做什么。我想有一个“空白”之间的内容和页脚，以便身体的背景将显示通过。我有一些疯狂的背景渐变/图像动作在进行，我不能通过将背景绝对定位在内容底部或诸如此类的东西来“伪造它”；因此，我需要那种空白的、透明的“页边空白”排序，或者任何必要的东西来分隔页脚和内容。。这很难。请看这里：。也许你可以把这些代码和你现在拥有的结合起来，我看到了并试图实现它。这似乎对粘脚不起作用；但我可能没有正确地使用它。我再试试。砰。明白了，多亏了你的评论。你真的帮了我的忙！。。。但当内容超出视口时，它不起作用。我会继续捣乱的。

$(document).ready(function(){

  var height1 = $(document).height(); // height of full document

  var height2 = 100; // height of footer plus margin

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.

});

$(window).resize(function () { 

  var height1 = $(document).height(); // height of full document

  var height2 = $("#footer").height(); // height of footer

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV. 

});