0

画面の下部を100px幅で塗りつぶす高さのフッターdivが設定されており、ボディの背景画像の上に黒い背景があります。内容の少ないページがいくつかあります。フッターはページの上に上がり、高さが固定されているため、フッターの下に本文の BG 画像が表示されます。CSS を使用して、フッター div の設定された高さを拡張することなく、浮き上がったフッターの下の画面全体が黒であることを確認するにはどうすればよいですか?

4

2 に答える 2

0

コンテンツ領域は「最小高さ」を持っているので、コンテンツは少ないですが、フッターは同じになります。

ここで「最小高さ」を確認できます

サンプルコードは次のとおりです。

.content {
   min-height: 600px;
}
于 2012-04-25T19:43:25.743 に答える
0

これに対する公開された解決策がいくつかあります。それらのすべての核心は、フッター以外のすべてのコンテンツをラップし、フッターの高さに等しいパディングを持つブロックレベル要素に最小の高さ (以前のバージョンの IE のハックを含む) を適用しているようです。次に、フッターの高さと負の上部マージンが明示的に設定されます (ラッパーの下部パディングと同じ値に設定されます)。

CSS スティッキー フッター ソリューションのコード例。

HTML:

<body>
    <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
    <![endif]-->

    <div id="wrap">
        <div id="main">
        </div>
    </div>

    <div id="footer">
    </div>
</body>

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;/
}
于 2012-04-25T19:45:41.297 に答える