- 締切済み
CSSレイアウトで作ったサイドバーの下に隙間ができてしまいます。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { margin: 0px; background-color: #FFFFFF; } #base { width: 780px; } #base p { margin: 0px; } #headder { background-color: #FF6600; height: 100px; width: 780px; } #main { background-color: #00FF00; width: 680px; float: left; } #side { background-color: #FFFF00; width: 100px; float: left; } #footer { background-color: #00FFFF; clear: both; height: 100px; width: 780px; } --> </style> </head> <body> <div id="base"> <div id="headder"> <p>ヘッダー</p> </div> <div id="main"> <p>メイン</p> <p>文章</p> <p>文章</p> <p>文章</p> <p>文章</p> </div> <div id="side"> <p>メニュー</p> <p>メニュー</p> <p>メニュー</p> </div> <div id="footer"> <p>フッター</p> </div> </div> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- parumon
- ベストアンサー率85% (6/7)
floatはボックスを浮かせるものなので、高さを固定しない限り、内包するテキストの分しか背景色が出ません。 方法としては、背景画像を作成し敷き詰めるか、#baseに#sideと同じ背景色を設定するかのパターンが多いかと思います。 （ただし、高さが#main＞#sideの場合でないと成り立ちませんが。。。） 参考にどうぞ。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ http://css-happylife.com/log/css-hack/000078.shtml 完全にCSSで作成されたいのでしたら、 http://coliss.com/articles/build-websites/operation/css/558.html この辺のページが参考になるかと思います。
お礼
ありがとうございます。色々な方法があるんですね。大変参考になりました。ありがとうございました！