0

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

コンテンツが長いため、上記は正常に機能します。ただし、コンテンツが短いページでは、画像とフッターが忍び寄って、フッターとブラウザーの下部の間に不要なスペースが表示されます (上部のナビゲーションで [メニュー 1] をクリックするか、上記のリンクのロゴをクリックします)。ホームページにアクセスしたら、サイズを変更してフッターの下に問題が表示されるようにします。

CSS スティッキー フッター方式 (cssstickyfooterDOTcom) に似た方式を利用したいと考えています。

画像のサイズ変更（これが望ましい）のため、これを解決するのに苦労しています。画像の高さが変わると、jQuery を使用してフッターの高さ/オフセットを更新する必要があると思います。

どんな助けでも大歓迎です。

PS上記のリンクの奇妙さについて申し訳ありません。私はこのフォーラムに不慣れで、問題を視覚的に説明するためのリンクを 1 つしか投稿できず、画像も投稿できません。

4

1 に答える 1

0

このようなものがうまくいくはずです。フッターを下部に結び付けることができるように、本文を相対的に配置します。画像と同じです。ここで、ウィンドウの高さが本体の高さを超える場合、本体の高さをウィンドウの高さに設定して、フッターが下部にとどまるようにします。

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();
于 2010-12-02T23:22:15.347 に答える