带有调整大小图像的粘性页脚附加到页脚

Question

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

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

我想使用类似于 CSS Sticky Footer 方法 (cssstickyfooterDOTcom) 的方法。

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

任何帮助将不胜感激。

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

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();