ページのフッターに問題があります。ページの下部に常にフッター (背景) を配置したいと思います。ブラウザが大きくなれば身長も伸びます。stickyfooter を見たことがありますが、その場合、高さは変わりません。ありがとうございました。
http://img688.imageshack.us/img688/2499/layoutus.png
よりよく説明するための画像へのリンクを次に示します。
ページのフッターに問題があります。ページの下部に常にフッター (背景) を配置したいと思います。ブラウザが大きくなれば身長も伸びます。stickyfooter を見たことがありますが、その場合、高さは変わりません。ありがとうございました。
http://img688.imageshack.us/img688/2499/layoutus.png
よりよく説明するための画像へのリンクを次に示します。
本文の背景色をフッターの背景色に設定しdiv
、コンテンツ領域の優先背景色でコンテンツをラップします。
あなたの写真では、本体は同じままで、フッターだけが成長しています。これを実現するには、体の固定高さを指定する必要があります。
代わりに両方を成長させたい場合は、次のコードを使用します。
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%;
}