0

私は次の基本的な html および css パターンを使用しています (ただし、私のライブ コードは非常に異なって見えます)。

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

ページの下部に固定フッターを表示します。

body タグに 2 つの背景を適用しました。1 つは木のテクスチャを繰り返し、その上に影を重ねます。これらは両方ともフッターの下に表示されます。

ほとんど機能しますが、長いページ (フッターを表示するには下にスクロールする必要があります) では、ブラウザー ウィンドウのサイズを変更すると、(木ではなく) 影がページに忍び寄ります。影を右下の位置に移動しようとしましたが、まったく機能しません。

ここにステージングがあります：私はFFとSafari http://www.dnbsandbox.com/diablo/で問題を繰り返しました

4

1 に答える 1

2

css の最初の行からこれを削除します。

html {
  height: 100%;
}
于 2013-03-07T09:36:21.000 に答える