- 締切済み
２コラムのサイトをCSSで指定する方法
以下のようにtest.htmlとtest.cssを作成して２コラム（左がメニュー、右がコンテンツ）のレイアウトのサイトを作成した場合、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。逆に、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合、メニューの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 どのようにすれば、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合でも、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合でも下地のカラー（緑）が表示されないようにできるのでしょうか？ 通常、このような問題はどのように対処するのか教えて下さい。 やはり、コンテンツ部分のデータの行数がメニュー部分のデータの行数よりも多くなると推測して下地のカラーの色（id=”main”のbackground-color）をメニュー部分の色（id="sidebar"のbackground-color）と同じ色にしておくしかないのでしょうか？ただし、このようにすると、推測どおりに行かずに左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 ＜test.htmlコード＞ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/test.css" type="text/css"> </head> <body> <div id="base"> <div id="header"> <p>ヘッダー</p> </div> <div id="main"> <div id="sidebar"> <p>サイドバー</p> </div> <div id="content"> <p>コンテンツ</p> </div> </div> <div id="footer"> <p>フッター</p> </div> </div> </body> </html> ＜test.cssコード＞ body { background-image:url(../img/example.gif); background-repeat:repeat; margin:0px; padding:0px; } #base { border:2px solid #000000; width:740px; margin:0px auto; text-align:left; background-color:#00FF00; } #header { background-color:#FFFF00; width:740px; height:130px; } #sidebar { width:150px; float:left; min-height:100%; background-color:#FF0000; } #content { width:550px; float:right; padding-left:20px; padding-right:20px; background-color:#FFFFFF; } #footer { clear:both; background-color:#FF00FF; height:130px; } 参考サイト等ありましたら、URL教えて下さい。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- syagain
- ベストアンサー率54% (42/77)
#sidebar#contentの両方に適当なheight:◯◯px;を固定の同じ値で設定すれば、内容に関わらず高さを合わせられます。 height:◯◯px; overflow:scroll; を両方で設定すれば、「高さ固定+内容は自動でスクロール」と言う形で、 フレームページのように収めることはできます。 もちろん下地は映りません。 ……ぐらいしか思いつかなかったのですが、 「内容によって自動で変わる高さ」に、どちらも揃えたいのですよね。 参考URLで似たような話題が出ているので、参照してみて下さい。
- nori_007
- ベストアンサー率35% (369/1048)
一番簡単なのは、#main のバックグランド画層に、#sidebar、#content のバックグランドに相当する、2色分けのバックグランド画像を言えれば解決です。#sidebar、#content ではバックグランドの画像、色指定はしません。 他に、Javascript ですが、下記の方法は参考にならないでしょうか。 ブロックレベル要素の高さを揃えるheightLine.js[to-R] http://blog.webcreativepark.net/2007/07/26-010338.html
お礼
nori_007さん ご回答、ありがとうございました。 参考にさせて頂きます。
お礼
syagainさん ご回答、ありがとうございました。 参考にさせて頂きます。