ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜FAQ

質問
質問者：kitty1000 ２コラムのサイトを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教えて下さい。
よろしくお願いします。
質問投稿日時：09/10/20 00:07
質問番号：5380968
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

 
回答者：syagain #sidebar#contentの両方に適当なheight:◯◯px;を固定の同じ値で設定すれば、内容に関わらず高さを合わせられます。

height:◯◯px;
overflow:scroll;

を両方で設定すれば、「高さ固定+内容は自動でスクロール」と言う形で、
フレームページのように収めることはできます。
もちろん下地は映りません。

……ぐらいしか思いつかなかったのですが、
「内容によって自動で変わる高さ」に、どちらも揃えたいのですよね。

参考URLで似たような話題が出ているので、参照してみて下さい。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/10/20 14:09
回答番号：No.2
参考URL： ​http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1208​
この回答へのお礼syagainさん
ご回答、ありがとうございました。

参考にさせて頂きます。

回答

良回答10pt
回答者：nori_007 一番簡単なのは、#main のバックグランド画層に、#sidebar、#content のバックグランドに相当する、2色分けのバックグランド画像を言えれば解決です。#sidebar、#content ではバックグランドの画像、色指定はしません。

他に、Javascript ですが、下記の方法は参考にならないでしょうか。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]
​http://blog.webcreativepark.net/2007/07/26-010338.html​
種類：アドバイス
どんな人：一般人
自信：自信あり
回答日時：09/10/20 13:30
回答番号：No.1
参考URL： ​http://blog.webcreativepark.net/2007/07/26-010338.html​
この回答へのお礼nori_007さん
ご回答、ありがとうございました。

参考にさせて頂きます。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ