Question

我正在使用960网格的网站上工作。在网站的底部，页面内容和页脚之间有一个div，其中包含100％宽度的图像，因此它会根据浏览器宽度调整大小。您可以在此处查看演示：http://redone.org/_dev/ski/menu2.html

以上工作正常，因为内容很长。但是，在内容较短的页面上，图像和页脚向上爬行以显示页脚和浏览器底部之间的不需要的空间（单击顶部导航中的“MENU 1”或上面提供的链接中的徽标）。进入主页后，调整大小以查看页脚下方的问题。

我想使用类似于CSS Sticky Footer方法（cssstickyfooterDOTcom）的方法。

由于图像的大小调整（需要），我很难解决这个问题。我想我可能需要利用jQuery来更新页脚的高度/偏移量，因为图像高度会发生变化。

非常感谢任何帮助。

P.S。很抱歉上面的链接很奇怪。我是这个论坛的新手，他们只会让我发布一个链接而没有图片来直观地解释我的问题。

Answer 1

这样的事情应该可以解决问题。将身体放在相对位置，这样您就可以将页脚绑在底部。与图像相同。现在，当窗口高度超过身高时，将身高设置为窗口高度，使页脚停留在底部。

<强> CSS

body            {position: relative}
.footer         {position: absolute; bottom: 0px}
.imgbackground  {position: absolute; bottom: [footer height]}

<强> JS

$(window).resize(function() {
    var winHeight = $(this).height();
    if(winHeght > $('body').height()) 
        $('body').height($(this).height()); // set the body height to the window height
    else $('body').height('auto'); 
}).resize();

粘贴页脚与调整图像附加到页脚

1 个答案: