Question

我的总体目标是在100％高度的内容和粘性页脚之间留出余量;一个通过它显示身体背景。

截至目前，我正在使用jQuery来计算文档的高度并减去页脚的高度加上边距，然后将新大小应用于ID为“content”的DIV。

然后我使用jQuery的resize（）函数来调整div的大小，如果视口大小发生变化，那么如果用户调整其浏览器窗口大小或放大，DIV的大小将自动更新。

不幸的是，当我在缩放中切换方向时（即放大后缩小，反之亦然），Javascript无法识别视口大小调整，让我在内容上留下太长或太短的背景。此外，此调整大小无法识别内容。我正在考虑在CSS中设置一个min-height，但是如果有一种方法可以在Javascript中完成，那我就全都听了。

我会接受纯粹的CSS和HTML解决方案，因为似乎应该是可能的，但我已经筋疲力尽寻找答案了。

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

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

});

非常感谢任何方向。

修改

得到它，都没有Javascript。 http://jsfiddle.net/Rpdr9/610/

Answer 1

我在小提琴上做了些什么。在我看来，这就是你想要的。

检查出来：http://jsfiddle.net/XbXDn/ 橙色：内容灰色：页脚

重要的是还要给你的身体和html高度：100％;属性。正如您将看到的，当您添加更多文本时，内容div自动增长（甚至超过100％），虽然内容和页脚之间的25em边距始终保持不变。

我故意在内容和页脚之间占据很大的差距，这样你就可以看到它有效：）

粘性页脚+ 100％高度+它们之间的边距

1 个答案: