cssでのヘッダー＋2カラム+フッターのレイアウトについて

解決済

質問者：nuts_001
質問日時：2009/02/19 22:10
回答数：1件

こんにちは。趣味のサイトをタグ打ち＋cssで作ってるのですが
どうしても上手く行かない箇所があり、ご教授頂ければ、と思い、
投稿します。

私の使用しているOSはmacOS9.2、ブラウザはバグの多いIE5.0（苦笑）
です。

レイアウトとしては最近よく見かける、ヘッダー＋2カラム＋フッター
のような構図にしたいのですが、この様に崩れてしまいます。
http://meikyu.pop.cx/faq/test.gif

↑この、下の方の背景がヘッダの分だけ（？）白くなってるのを
なんとかしたいのですが…
（横のボーダーも途中で切れてしまってますし…）

記述した、htmlファイルと、cssファイルも上げてみました↓

htmlファイル
http://meikyu.pop.cx/faq/

cssファイル
http://meikyu.pop.cx/faq/main.css

あちこちのcssリファレンスのサイト様等を参考に、2時間近く奮闘
しましたが、解決方法が分かりません。
解決方法でなくても、うちの環境では正常に見えるよ、
という報告だけでも頂けると嬉しいです。
どうかご助言よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： naokita
回答日時：2009/02/20 07:21

<!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"></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なので適当に直して下さい。以上。

- 0
- 件

通報する

この回答へのお礼

素早いお返事をありがとうございました！

載せて頂いたソースをちょこちょこ弄って無事に組む事が出来ました！

少し面倒ですがheightはページごとにpxで指定する事にしました。

min-heightはいいな、と思ったのですが現行使用されているブラウザには対応していないものも多い様なので…。
スクロールの事等、自分では失念してましたので非常に勉強になりました。
ありがとうございます。

通報する

お礼日時：2009/02/20 22:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！