html - フッターの背景は常に一番下に

Question

ページのフッターに問題があります。ページの下部に常にフッター (背景) を配置したいと思います。ブラウザが大きくなれば身長も伸びます。stickyfooter を見たことがありますが、その場合、高さは変わりません。ありがとうございました。

http://img688.imageshack.us/img688/2499/layoutus.png

よりよく説明するための画像へのリンクを次に示します。

Answer 1

本文の背景色をフッターの背景色に設定しdiv、コンテンツ領域の優先背景色でコンテンツをラップします。

Answer 2

あなたの写真では、本体は同じままで、フッターだけが成長しています。これを実現するには、体の固定高さを指定する必要があります。

代わりに両方を成長させたい場合は、次のコードを使用します。

HTML

<div id="main">I'm the body</div>
<div id="footer">I'm the enlarging footer</div>

CSS

body, html{
    height: 100%;
}

#main{    
    background:silver;
    min-height: 80%;
    min-width: 100%;
    height: 80%;
}
#footer{    
    background: green;
    position: fixed;
    bottom: 0;
    min-height: 20%;
    min-width: 100%;
}

デモ: http://jsfiddle.net/TyhLL/

Answer 3

私も同じ問題を経験しました

スティッキー フッター フレキシブルウェイ

この投稿はあなたにとって非常に役立つかもしれません。