- 締切済み
常に画面の下部に表示させたい
ヘッダー、コンテンツ、フッターをdivで作成し、 コンテンツがテキスト1行だとしても、 フッターを常に画面の下部に配置したいのです。 スタイルシートを使用して作成するにはどうしたらよいでしょうか？ コードは以下のようになっています。IE6.0使用。 ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>常に下部表示</title> </head> <body> <div id="header">ヘッダー</div> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </body> </html> ---------------------------------------------- 上記だと、すべて上部に詰まります。 #id { position : absolute; bottom : 0 ;} とすると、一見よさそうですが、#contentsの中身が多くなると、画面上で重なってしまいます。 (ーー;)
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- nuruhho44
- ベストアンサー率57% (38/66)
ご希望の動作とは違うかもしれませんが、ご参考までに。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { margin : 0px; } .header { height : 10%; background-color : #ffffaa; } .contents { height : 80%; background-color : #aaffff; } .footer { height : 10%; background-color : #ffaaff; } --> </STYLE> </HEAD> <BODY> <DIV class="header">ヘッダー<BR><A href="javascript:void(0);" onclick="document.getElementById('ct').innerHTML+='<BR>コンテンツ';">コンテンツ内容追加</A></DIV> <DIV class="contents" id="ct">コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ</DIV> <DIV class="footer">フッター</DIV> </BODY> </HTML> 「コンテンツ内容追加」をクリックしていってください。 TABLEでやっても同じことで、単純にheightを％で指定しただけです。よってブラウザを開く大きさ（高さ）によってヘッダー・コンテンツ・フッターそれぞれの高さも変わってしまいます。
- mameusa
- ベストアンサー率50% (87/174)
bodyでoverflowの指定をしてから、 （scrollがautoかな？） フッターの<div>の中に style="position:absolute; bottom:0%" としても重なってしまいますか？
補足
御回答ありがとうございます！ まず、補足ですが、以下のようにしたいと思ってます。 １．コンテンツが少ないときにはフッターは最下部 ━━━━━━━━━━━━━━━━━━━━ ヘッダー ｜ コンテンツ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ フッター ｜ ━━━━━━━━━━━━━━━━━━━━ ２．コンテンツが多いときにはフッターは画面外に出てもよい ━━━━━━━━━━━━━━━━━━━━ ヘッダー ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ ━━━━━━━━━━━━━━━━━━━━ コンテンツ コンテンツ フッター ※テーブルレイアウトを使用すればできるんですが、CSSを使用することが必要になっています。 mameusaさんのおっしゃるとおりにやってみましたが、 ２．のときに、フッターが画面「内」の最下部に配置されてしまいます。 また、body { overflow : scroll }にすると、スクロールバーが二重になってしまうので、避けたいと思います。 急務ではないので、お分かりの方、よろしくお願いします。
補足
ご回答ありがとうございます。 私のやろうとしていることは、まさにこんな感じです。 せっかく作っていただいたのにこんなことを言っては何ですが、 １．Netscapeでは作動しません。コンテンツが増えると重なってしまいます。 ２．IEでは、作動しましたが、DOCTYPE宣言を入れると作動しませんでした。 フッター固定なんて普通しないのかな…。 私もいろいろ試しているのですが、なかなかうまくいかなくて。 もう少し頑張ってみます。