粘性页脚+ 100％身高+他们之间的空白量

我的总体目标是在身高100％的内容和粘性页脚之间创建保证金;通过它显示身体背景。粘性页脚+ 100％身高+他们之间的空白量

截至目前，我使用jQuery来计算文档的高度，并减去页脚的高度加上页边距，然后将该新大小应用于ID为“content”的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/

来源

2012-07-11 jporcenaluk

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

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

重要的是也给你的身体和HTML的高度：100％;属性。正如您所看到的，内容div自动增长（甚至超过100％），因为您添加更多文本，尽管内容和页脚之间的25毫米页边始终保持不变。

我特意花了巨大的优势内容和页脚之间，只是让你可以看到它的工作原理:)

来源

2012-07-11 06:31:11 PoeHaH

http://jsfiddle.net/XbXDn/1/我绝对欣赏，你把这个努力。我添加到JSFiddle中，希望能够更清楚地表明我想要做什么。我希望在内容和页脚之间有“空白空间”，这样身体背景就会显示出来。我有一些疯狂的背景渐变/图像动作在进行，我不能通过将背景完全放置在内容的底部或类似的东西来“伪造”它;因此我需要那种空白的或透明的“边缘”，或者真正需要分隔页脚和内容的东西。 – jporcenaluk 2012-07-11 06:44:11

我明白了..这是一个艰难的。看看这里：http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin。也许你可以将这些代码与你目前拥有的代码结合起来 – PoeHaH 2012-07-11 06:55:09

我看到了这个代码并试图实现它。它似乎不适用于粘性页脚;但我可能没有正确使用它。我会再试一次。 – jporcenaluk 2012-07-11 07:16:24

粘性页脚+ 100％身高+他们之间的空白量

回答

相关问题