0

私は HTML5boilerplate を持っていて、本文の背景としてスティッキー フッターと画像を含むテンプレートを作成したいと考えています。背景は常にページの最後 (ページが clientHeight より高い場合) または画面 (ページが短い場合) にある必要があります。
私の問題は、スティッキーフッターが機能するのに背景が機能しない場合と、その逆の場合です。

見てください。

これは私の index.html です:

<body>
    <div class="wrap">
        <header></header>
        <div class="main clearfix right-sidebar">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </div> <!-- end of .wrap -->
    <footer></footer>
</body>

私のCSSは次のとおりです。

/*html, body { min-height: 100%;}*/
html, body { height: 100%;}
body > .wrap {height: auto; min-height: 100%; margin: 0 auto;}
body > .wrap > .main { padding-bottom: 70px;} 
body > .wrap, body > footer {width: 950px; position: relative;}
body > footer { margin: -70px auto 0 auto ; height: 70px; clear:both; } 
</* end of centered sticky footer */
body { background: url(../img/bg.png) #fff 0% 100% repeat-x; }
.clearfix:before, .clearfix:after { content: " ";  display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

html, body { height: 100%;}ページがクライアントの画面よりも短い場合、すべてが問題ないと定義すると。

本体高さ100%、ショートページ

ページがクライアントの画面の背景画像よりも高い場合、画像はページではなく画面の下部にあります。ユーザーがページをスクロールすると、画像が画面の中央に表示されます。
この図は問題を示しています (わかりやすいように背景が黄色になっています)。

本体高さ100%、ハイページ

そして、私が定義したとき、html, body { min-height: 100%;}すべてが高いページでは問題ありませんが、スティッキーフッターは短いページでは機能しません:

body min-height 100%、短いページ

背景を固定したくないことを追加したいと思います。画面またはページの にある必要があります。

4

3 に答える 3

0

このチュートリアルから js なしでスティッキー フッターを試すことができます: http://ryanfait.com/sticky-footer/

于 2013-02-26T11:24:46.357 に答える
0

jQuery を使用して、本体の最小高さを画面サイズに設定し、フッターの高さからオフセットすることができます

$('document').resize(function(){

  var windowHeight = $('window').height() - $('footer').height();

  $('.wrap').css('min-height', windowHeight );

});
于 2013-02-26T10:52:32.493 に答える