- ベストアンサー
cssでのヘッダー＋2カラム+フッターのレイアウトについて
- cssでヘッダー＋2カラム＋フッターのレイアウトを作成しようとしていますが、一部の表示が崩れてしまいます。
- 使用しているOSはmacOS9.2、ブラウザはIE5.0であり、レイアウトが正常に表示されない問題があります。
- htmlファイルとcssファイルを提供しましたが、解決方法が分からないため、助言を求めています。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <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"><!-- *{ margin:0;} body,html{ height:100%;} body{ text-align:center; background:#ccc; } #con{ text-align:left; margin:0 auto; width:650px; height:100%; } #top{ width:100%; background:#f8f8ff;} #main{width:100%; background:#666; height:100%;} #le{ width:20%; float:left; } #ri{ width:79%; height:100%; float:right; border-left:dotted 1px; background:#fc3; } #foot{ background:#fcf; width:100%; text-align:right; } #top,#main,#foot{border: solid #000; border-width: 0 2px;} --></style> </head> <body> <div id="con"> <div id="top"><h1>top</h1></div> <div id="main"> <div id="le"><h2>le</h2></div> <div id="ri"><h2>ri</h2></div> </div> <div id="foot"><span>TOPへ</span></div> </div> </body> </html> right が真下に落ちていましたので、画像と同じように全面的に改良。 IE5,これは無視。それとheight:100%をどうするか？ 本来、コンテンツが多い場合は、不要なんだけど今回は画像通り設定。 コンテンツに合わせてheight:;を調整。min-height,程度でいいかも・・・ 右のrightにheight:100%を割り当てたら下部フッターがヘッドの枠分程度スクロールが必要。あとは、DOCTYPEをどうするかの問題やコンテンツの問題。 もっと複雑に書いたら可能でしょうが、そこまで必要ですか？。 本来ボーダーは、外周に設定するけど、heightの関係で部分設定。 不具合があれば簡単なHTMLなので適当に直して下さい。以上。
お礼
素早いお返事をありがとうございました！ 載せて頂いたソースをちょこちょこ弄って無事に組む事が出来ました！ 少し面倒ですがheightはページごとにpxで指定する事にしました。 min-heightはいいな、と思ったのですが現行使用されているブラウザには対応していないものも多い様なので…。 スクロールの事等、自分では失念してましたので非常に勉強になりました。 ありがとうございます。