粘頁腳與調整大小的圖像附加到頁腳

Question

我正在使用960網格的網站上工作。在網站的底部，頁面內容與包含100％寬度圖像的頁腳之間存在div，因此它根據瀏覽器寬度調整大小。您可以在這裏查看演示：http://redone.org/_dev/ski/menu2.html

上述工作正常，因爲內容很長。但是，在內容較短的頁面上，圖像和頁腳會逐漸上升，以顯示頁腳和瀏覽器底部之間的空間不足（單擊頂部導航欄中的「MENU 1」或上面提供的鏈接中的徽標）。一旦在主頁上，調整看到頁腳下的問題。

我想利用類似於CSS粘滯頁腳方法（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();