※ ChatGPTを利用し、要約された質問です(原文:[CSS] 常にフッターは下部に表示 IE7)
このQ&Aのポイント
常にフッターは下部にくるように設定するためのCSSとHTMLのコードを提供します。
IE9などでは画面を広げてもフッターが一番下にくっついて残るが、IE7ではそうならない。
IE7で画面を広げるとフッターがその位置に残るため、更新すると一番下に移動する。
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。
内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。
----------------------------
内容
----------------------------
フッター部
----------------------------
【HTML側】
<body>
<div id="container">
<div id="main"><p>内容</p></div>
<div id="footer">Copyright</div>
</div>
</body>
【CSS】
body,html{height:100%;}
#container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;}
body > #container {height: auto;}
#main {background:#f00;padding-bottom: 100px;}
#footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;}
IE9などですと、最初に画面を開いて一番下にいたフッターが、
画面サイズを広げると一緒にくっついて一番したのままでいるのですが、
IE7で見ると、最初に開いた画面では一番下にいるのに、画面を広げると
その場所のままです。更新をかけると一番下に移動するのですが、
これはIE7では無理なのでしょうか?
広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が
いらっしゃいましたら、ご教授お願いいたします。
補足
ORUKA1951様、返信ありがとうございます。 ORUKA1951様のサンプルソースで試してみたところ、 IE9の時点で確認したらフッターが下部になっておりましたが、 画面を縮めたときに、フッターが内容の上にかかるようになってしまい、 できれば画面を縮めた際は、内容の上にはかからず 内容の下にフッターがくるようにしたいです。 ( 説明不足ですみません(><) ) こんな感じです。 画面広いとき↓ ---------------------------- 内容 ---------------------------- フッター ---------------------------- 画面ちぢめたら↓ ---------------------------- 内容 ---------------------------- フッター ---------------------------- その際も、このfixedを使用してどうにかすればフッターの位置を 内容の下にもってこられるのでしょうか? 何度もご質問して申し訳ありませんが、宜しくお願いいたします。