DIVでの段組でhight属性の設定方法

質問

DIVでの段組でhight属性の設定方法

添付画像のような段組を外部CSSをつかってしています。

●BとCにhightを設定しなかった場合
Cに色々コンテンツを入れていき、BよりCの縦の長さが長くなった場合、
BとDの間に隙間ができてしまいます。

●BとCにhight[100％]を設定した場合
この場合もCの長さがBより長くなった時点で、BとDの間に隙間が発生します。

●BにCよりも明らかに長い数値を入れた場合
Bのhightを[1000px]とかにしてCよりBを長くした場合、
BとDの間はきっちりとつながります。

★質問
Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにするにはどのようにしたら良いでしょうか？
ちなみに、BとCはEの中に入れています。

-------------------------
<div class="E">
　<div class="B"></div>
　<div class="C"></div>
</div>
-------------------------

よろしくお願い致します。

回答No.2

rurino · ベストアンサー

HTMLでもCSSでもないのですが^^;

「HeightLine.js」というジャバスクリプトライブラリがあります。
どうしてもサイドバーを置く場合
Bの中身がCよりすくなくなってしまうので、
上記のライブラリを設置した上で
Bに背景色・背景画像などを敷けば
不自然さはなくなるかと思います。

設置方法は参照URLをどうぞ。

参考URL：

http://blog.webcreativepark.net/2007/07/26-010338.html

回答No.4

abril

＃この質問は繰り返し出てくるので、過去の回答例も参考になさってみては。

> Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにする

BとCは親子関係にあるわけではなく並列なだけなので、BとCを連動させて高さを合わせる、という考え方は（今の仕様の）CSSでは成り立たないと思います。

それはさておき、見た目をご希望通りにする方法は何通りかあります。よく知られていると思われるテクニックをいくつかあげておきます。既出の回答と一部重なりますが補足的な事も含みますので、ご容赦下さい。

(1)BとCの親要素であるEのbackgroundに、BとCの背景をくっつけて1枚にした画像を指定する。BとCにはbackgroundは指定しない。

これは先の回答者様がお答えになっている方法で、実際にはBとCの高さは揃っていませんが、2カラムの背景色・背景画像が親要素の方に背景画像として描画されている事で、擬似的にBとCの高さが常に揃っている様に見える、という簡単な理屈です。最近も同様のご質問があり、そちらの方に詳細を書きましたのでご参考までに。
【参考】http://okwave.jp/qa/q5908706.html

ただし、この方法にも欠点はあります。例えば、それぞれのカラムにborderを指定してしまうと見せかけの高さと実質的な高さが揃っていない事がばれてしまうので、borderでカラムを囲む様なスタイルの場合は不向きです（その場合はborderっぽく見せる背景画像を用意したり等々、ちょっと工夫が必要になります）。

(2)BとCの高さを揃えるJavaScriptを使う

No.2の回答者様も紹介してくださっているheightLine.jsが有名ですね。高さを揃えたいコンテナブロックに所定のルールにのっとったclass名を指定するだけで、自動的にカラムの高さを計算して揃えてくれるので、非常に簡単に使えます。リロードする際には一瞬伸縮する動作が見えますが気にする程のものではないと思います。

(3)ネガティブ・マージンとoverflowの合わせ技

BとCに padding-bottom: 32768px; margin-bottom: -32768px; という巨大な正負の数値を指定して高さを揃えた上で、親要素Eに overflow: hidden; を指定してはみ出し分をカットする、という方法です。詳細は下記に紹介されています。
http://coliss.com/articles/build-websites/operation/css/558.html

ただ、かなり強制的な方法の為か、一部で印刷の不具合などが出る場合もある様です。

(4)2カラムの領域を重ねてずらす

こちらの詳細も上記と同じサイトで紹介されていますので、ご覧になってみて下さい。
http://coliss.com/articles/build-websites/operation/css/1591.html

確かにこの方法であれば作者の言うとおり、古いIEを含むほとんどのブラウザに対応しつつCSSハックも使わず、(1)の様な画像の手間をかける事無く、(2)の様にJavaScriptを使用する必要もありませんね。文法的にもValidです（個人的にはちょっと入れ子構造が増えるのが気になりますが）。

お礼

みなさま回答ありがとうございます。
まとめての返信お許し下さい。

色々方法を教えて頂いた#4様にベストアンサーをつけようかとも思ったのですが、
今回#2様が先に教えて頂いた方法で解決しましたので、今回は#2様に付けさせていただきます。

色々な方法が分かり大変助かりました。
みなさまありがとうございました。

回答No.3

hoso1974

１です。
すみません、エラーが出て画像が添付できませんでした。
たいした画像じゃないんですけど。。。

一応、もう一度添付してみます。
これも失敗したらごめんなさい。

回答No.1

hoso1974

背景画像を使います。

まずは、Bと同じ幅で、同じ背景の無地の長方形の図形を用意します（添付画像参照）
それをEの背景としてcssで指定します。

.E {
background-image:url(bg.jpg);/*背景画像*/
background-repeat:repeat-y;/*縦一列だけ敷き詰め*/
background-color:#ffffff;/*Cの背景にしたい色*/
}

これで、Bが長くても、Cが長くても問題はでないと思います。