- ベストアンサー
ヘッダーとフッターを横100％にする方法
ヘッダーとフッターを横100％にする方法 添付の画像のように段組したページを制作したいと考えています。 AとDは窓の大きさを変えたり、お気に入りを閉じてようが開いてようが、 関係なく横100％になるように(背景が表示されるよう)表示させたいと思っています。 B・Cに関しては、横800pxで表示したいのですが、外部CSSで設定するいい方法を教えてください。 参考URLとしては、http://www.chem.keio.ac.jp/な感じでしょうか。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTML ---- <body> <div id="pagebody"> <div id="A"></div> <div id="B"></div> <div id="C"></div><br class="clear: both;"> </div> <div id="D"></div> </body> CSS ---- *{ margin:0; padding:0; } #A { } #pagebody { width: 800px; margin: 0 auto;} #B { width: 180px; float: left; } #C { width: 600px; float: right; } #D { width: 100%; } 一番単純な形かとおもいます。 ヘッダの背景はbodyの背景でまかないます。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
これくらいなら、あたちでもできるわよ <style type="text/css"> body{text-align:center; } #wrap{width:100%; text-align:left; margin:0 auto;} #inner{margin:0 10px;} #right{width:200px;float:left;} #left{width:600px;float:right;} .clear{clear:both;} .clear hr{display:none;} </style> <body> <div id="wrap"> <div class="header">A</div> <div id="inner"> <div id="right">B</div> <div id="left">C</div> <div class="clear"><hr /></div> </div> <div id="footer">D</div> </div> </body>
お礼
回答ありがとうございます。 外部CSS希望だったのでゴメンナサイ。
お礼
回答ありがとうございます。 無事表示する事ができました。 ありがとうございました。