1

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

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

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

不幸的是，当我在缩放时切换方向（即放大后缩小，反之亦然），Javascript 无法识别视口的大小调整，从而使我的内容背景过长或过短。此外，此调整大小无法识别内容。我正在考虑在 CSS 中设置最小高度，但如果有办法在 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/

4

1 回答 1

1

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

看看： http: //jsfiddle.net/XbXDn/ 橙色：内容灰色：页脚

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

我故意在内容和页脚之间留出很大的距离，这样你就可以看到它有效:)

于 2012-07-11T06:31:11.830 回答