フッターにリサイズイメージ付きの固定フッター

Question

私は960グリッドを利用するサイトで作業しています。サイトの下部には、ページのコンテンツと100％幅の画像が含まれているフッターの間にdivがあるため、ブラウザの幅に基づいてサイズが変更されます。ここでデモをチェックすることができます：http://redone.org/_dev/ski/menu2.html

内容が長いため、上記はうまくいきます。ただし、コンテンツが短いページでは、画像とフッターが上になり、フッターとブラウザの下部の間の不要なスペースが表示されます（トップナビゲーションの[MENU 1]​​または上のリンクのロゴをクリックしてください）。ホームページに移動したら、フッタの下の問題を見るためにサイズを変更します。

CSSスティッキーフッタメソッド（cssstickyfooterDOTcom）と同様の方法を使いたいと思います。

私は、画像のサイズ変更（これが望ましい）のためにこれを解決するのが困難です。私は、イメージの高さが変わると、フッタの高さ/オフセットを更新するためにjQueryを利用する必要があるかもしれないと思う。

ご協力いただければ幸いです。

P.S.上のリンクの不思議については申し訳ありません。私はこのフォーラムを初めて利用しています。彼らは私の問題を視覚的に説明するために1つのリンクと画像を投稿することしかできません。

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