html - 絶対なしでdivを一番下に付ける方法は?

Question

だから私はフッターを持っています:

<div id="footer" >
    <div style="padding:20px;">
        Footer
    </div>
</div>

スタイルのラッパーにあります：

#page { width:964px; margin:0 auto; }

したがって、フッター div をブラウザーの下部に追加する必要があります。問題は、次を追加した場合です。

position:absolute;
bottom:0;

前の div の一部はフッターと交差しており、高さと幅を自分で設定する必要があります。

score 7 · Accepted Answer

このようにしてみてください..

CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
    <p>wrapper text here</p>    
    <div class="push"></div>
</div>

<div class="footer">
    <p>footer text here.</p>
</div>

score 1 · Accepted Answer

これはまさにあなたが求めているものではありませんが、私が使用した同様の実装ですposition: fixed。

あなたが達成しようとしていることはposition: absolute、それを実現するために使用する必要があります。そして、要素が適切に収まるように、要素の高さを手動で指定する必要があります。の中にコンテンツがある場合はfooter、を使用paddingして形状を完成させることができます。

これらは可能な唯一のオプションです。fixedポジショニングまたはポジショニングのいずれかを行ってabsoluteください。

score -1 · Accepted Answer

使用する：

#footer {
    position: fixed;
    bottom: 0;
}

仕組みがよくわかる記事はこちらposition:

html - 絶対なしでdivを一番下に付ける方法は?

3 に答える 3

Related

Reference