アプリ版：「スタンプのみでお礼する」機能のリリースについて

CSS初心者　コンテンツ高さに合わせたメニュー領域の背景色

解決済

  • 質問者：tukamotodaisuke
  • 質問日時：
  • 回答数：4件

CSS初心者です。
Win IE6　環境で制作しています。

「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。

CSSは

.contents { width:770px; text-align:center; }　（全体のコンテンツ領域）
.contents-left { width:550px; float: left; text-align:center; }　（←コンテンツ部分）
.contents-right { width:200px; vertical-align:100%; }　(←メニュー部分）
.footer { width:770px; text-align:center; clear: both; }　（フッター）

とし、

メニューを囲んでいるDiv要素には
.menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; }

としています。

いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。
教えてください。よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

  • 回答者： Kuppycat
  • 回答日時：

「vertical-align」はあくまでもBOX内の要素のそろえ位置を指定するものであって、BOXの幅が変わるわけではありません。



＃１の方が言うように<div>で周りを囲い背景を設定するしか。

IEとFirefoxで同様の表示ができるサンプルを作ってみました。
ご参考とまで。

------------------------------
<html>
<head>
<title>Layout Sample2</title>
<style type="text/css">
.contents {
width:770px;
text-align:center;
}
.contents-left {
width:550px;
float:left;
text-align:left;
background-color:#ffffff; /* 左側の背景が画像にならないように隠すため */
}
.contents-right {
text-align:center;
}
.footer {
width:770px;
text-align:center;
}
.clr {
clear:both;
}
.back {
width:770px;
background-color:#ccffff;
background-image:url(./img/menuback.gif);
}
</style>
</head>
<body>
<div class="back"><!-- さらに囲まないとFirefoxじゃ背景でない -->
<div class="contents">
<div class="contents-left">
<h2>こんてんつ</h2>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
</div>
<div class="contents-right">
<h2>めにゅー</h2>
<p>めにゅー１</p>
<p>めにゅー２</p>
<p>めにゅー３</p>
<p>めにゅー４</p>
<p>めにゅー５</p>
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p>ふったふったふった</p>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： tany180sx
  • 回答日時：

外側をdiv等で囲む場合、内側にfloat要素があれば、内側の最後にclearが必要です。


内側にfloatではない高さ1px以上の要素がなければ
外側のdivは領域を確保しません。
ネスケで確認すれば分かるはずです。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： Kuppycat
  • 回答日時：

＃２です。

ちょと訂正(^-^;

BOXの幅が　→　BOXの高さが　です。

たてよこの解釈は重要ですので。ゴメンorz
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： tany180sx
  • 回答日時：

コンテンツ部分に応じてメニュー部分の高さを取得するのは現実的に難しいです。


<div id="wrapper">
<div id="contents-left"></div>
<div id="contents-right"></div>
<div style="clear:both;height:1px;"></div>
</div>
としてwrapperに背景画像をつければ意図した表示になると思います。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報