スタイルシート（CSS）で、高さ（height）を隣の要素に合わせたい

質問

CSSでの、高さの設定について質問させて下さい。

あるボックス要素の中に入った2つの子要素を、
親要素の高さに合わせるのではなく、
隣の要素に高さを合わせたいのですが、
何か方法は無いでしょうか。

隣の要素の中の文章などのテキストが長文になると、
親要素の高さは動的に変化してくれますが、
隣の要素はうまく対応してくれません。

初歩的な質問で恐縮ですが、
どなたか、よろしくお願い致します。

回答No.3

leap_day · ベストアンサー

こんにちは

『ブラウザ用』しか見ていないのでcss内は適当です（－－；）

cssのみではheight:*px;指定しないとおそらく無理？だと思います

<style type="text/css"><!--
#newBox {
width:600px;
margin:70px auto 0px;
border:1px solid darkgray;
}
#newBox_Left {
background-image:url(left.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
#newBox_center {
background-color:Lavender;
width:560px;
float:left;
}
#newBox_Right {
background-image:url(right.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
--></style>

<script language="javascript"><!--
window.onload=function() {
h = document.getElementById("newBox_center");
boxh = h.clientHeight;
document.getElementById("newBox_Left").style.height = boxh + "px";
document.getElementById("newBox_Right").style.height = boxh + "px";
}
//--></script>

<noscript>
<style type="text/css"><!--
#newBox_Left,#newBox_center,#newBox_Right {
height:500px;
}
--></style>
</noscript>

<div id="newBox">
<div id="newBox_Left">&nbsp;</div>
<div id="newBox_center">
　text<br>　text<br>　text<br>　text<br>　text<br>　text<br>
　text<br>　text<br>　text<br>　text<br>　text<br>　text<br>
　text<br>　text<br>　text<br>　text<br>　text<br>　text<br>
　text<br>　text<br>　text<br>　text<br>　text<br>　text<br>
</div>
<div id="newBox_Right">&nbsp;</div>
<div style="clear:both;"></div>
</div>

javascriptを使用してますので当然offにしている環境では1行分の背景しか表示されません
そのため<noscript>内でheight指定しています

p.s.
一応これで僕の環境(IE6,Firefox2,Opera9)で実現できているのですがたまに表示が異なることがありますので分かる範囲内であれば修正しますので言ってください

お礼

ご回答、本当にありがとうございます。

お教え頂いた方法で試してみたところ、
無事に思っていた表示ができました。
本当にありがとうございました。

私は、javascriptは分からないのですが、
これから勉強して理解して行きたいと思います。

今回は本当にありがとうございました。

回答No.2

golive001

全体的にどんなデザインしたいか不明なのでなんとも言えないですが、
newBoxに height:100%　を加えればうまく表示できるみたいですね。
IE限定ですが・・・(^^;
FWでは文章が突き抜け表示されてしまうようです。

あとは各ブロックの調整でしょうかね・・・

お礼

再度ご回答、本当に感謝致します。

私のやり方が間違っているのか、
お教え頂いた方法でもうまくいきません・・・。本当にすみません。
どんなデザインをしたいかを書いていなくてすみませんでした。
具体的な例をアップしましたので、もし宜しければご覧下さい。

　ブラウザ用　http://css.ehoh.net/aaa/
　ローカル用　http://css.ehoh.net/aaa/download.html

「IE6」と「IE7」と「Firefox」では、
それぞれ、違うように描画されると思いますが、
センターの要素が、左右と合ってないのは共通だと思います。

ブラウザのフォントの大きさ設定を変えて頂ければ分かると思いますが、
「文章がはみ出る」場合は、センターの要素が飛び出して、
「文章がはみ出ない」場合は、左右の要素が長すぎる感じになっていると思います。

このセンターの要素にどれだけの長文が入ろうと、
左右の画像が、ぴったりと下まで着いてきてほしいのです。

左右の画像を1枚にすれば実現できるのですが、
2枚の画像で実現したいのです。

HTMLのテーブルを使えば可能なのですが、
CSSだけでも出来るものなのか知りたいのです。

ご回答、本当にありがとうございました。

回答No.1

golive001

===CSS====

#contener{
width:800px;
background:black;
}

#newBox{
width:100%;
background:red;
}

#blockA{
width:60%;
height:100%;
background:blue;
float:right;
}
#blockB{
width:40%;
height:100%;
background:green;
float:left;
}
=====html===========
<div id="contener">
<div id="newBox">
<div id="blockA">ここに内容</div>
<div id="blockB">ここに内容</div>
</div>
</div>

こんな感じかな？？
久々にCSSいじったんで確証はないですが、

さらにボックスを追加してやって、その中に高さを合わせたい子要素を入れると・・
その上で２つのBOXのheightを100%とすれば、２つある要素のうち高い方のBOXの高さに合わせられますよ。

たぶん・・・

お礼

ご回答、ありがとうございます。

ご回答を参考にしてテストしてみましたが、
やはり、状況は変わりませんでした・・・。

子要素の100%は、
親要素に対する100%という解釈になる為だと思います。

仮に、「親要素」の高さが「1000px」で、
「子要素-A」の高さが、長文を入れた為に「1200px」になった場合、
ブラウザ上では親要素も引き伸ばされ「1200px」となり表示されます。

長文を入れた「子要素-A」と隣り合う、「子要素-B」の高さは、
「ブラウザ上で表示される実際の親要素の高さ」→「1200px」ではなく、
「CSSで指定されている親要素の高さ」→「1000px」に高さを合わせてしまいます。
その為、「子要素-B」の下には「200px」の空きができてしまいます。

現在のCSSのバージョンでは、
隣合う要素に高さを合わせる事が不可能なのなら諦めたいと思いますが、
何か方法があるのなら知りたいのです。

ご回答、本当にありがとうございました。