cssで背景を固定配置にする

on 07 21, 2009

090722

今日は伊藤商店のwebを作って必要だった、
cssでフッターを固定する場合のメモ。

HTMLソース

<body>
    <div id="contents">
        <h1>ほげ</h1>
        <p>hogeのコンテンツだよ。</p>
    </div>

    <div class="footer">
        hoge-Footer contents
    </div>
</body>

CSSソース

html, body {
    height: 100%;
}
#contents {
    min-height: 100%;
    height: auto !important;
    height: 100%; /* ie用に設定 */
    margin: 0 auto -100px; 
    /* class=&quot;footer&quot;と同じ高さ(100px)の負の値を入力 */
}

.footer {
    height: 100px;
    /*適当に色でもつけてみる*/
    background-color:#666666;
}

コンテンツの内容によっては、IE6などブラウザで、
精度がかなり落ちてしまうので微調整が必要。
他にもJSなどでできるようなので、後で試してみようと思う。

○次の投稿 »
○前の投稿 »

Leave a Reply