粘性页脚，调整图像大小附加到页脚

Question

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

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

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

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

任何帮助将不胜感激。

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

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