html - フッターを下に、テキストを中央に

Question

コンテンツにどれだけのテキストが含まれていても、フッターを一番下に保つようにしています。私は何を間違っていますか？レイアウトは次のとおりです。

    .top{
    width:500px;
    height:100px;
    background-color:black;
}

.content{
    width:500px;
    min-height:100%;
    position:relative;
}

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:absolute;
    bottom:0;
}

<div class="top"></div>
<div class="content"></div>
<div class="footer"></div>

http://jsfiddle.net/RDuWn/68/

よろしく、サイモン

Answer 1

コードは機能しますが、フッター クラスで高さの代わりに最小高さを設定して、コンテンツ サイズに合わせて拡大できるようにする必要があります。

.footer{
    width:500px;
    min-height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

変更後の外観と、フッターに追加されたプレースホルダー コンテンツを次に示します。

Answer 2

オーバーラップを引き起こしたのは、あなたの絶対位置でした。絶対要素は通常のフローから削除され、位置を決定するときに他の要素によって「無視」されます。css で位置を指定しない場合、デフォルトで静的な配置になり、すべての要素が適切に「フロー」に配置されます。

http://www.w3schools.com/css/css_positioning.asp

使用したCSSは次のとおりです。

.top{
    width:500px;
    height:100px;
    background-color:pink;
}

.content{
    width:500px;
    min-height:100%;
    background-color:blue;
}

.footer{
    width:500px;
    height:100px;
    background-color:black;
    margin-bottom:0px;
}