2012-04-13 16 views
0

に対する高さ。これまでのところよくできていますが、下の「jsfiddle」を参照してください。しかし、右の列の高さは、左の列の高さに関連している必要があります。したがって、流体カラムに内容があり、ブラウザウィンドウのサイズを変更して、左の列の高さを増減させると、右の列が同じ高さになる必要があります。私がこれまでに得たもの2列のdivレイアウト:右のカラム固定幅、左流体、私は左の流体幅を有し、右の幅を固定している2つの列2つのdivとレイアウトをしたい互いに

http://jsfiddle.net/henrikandersson/vnUdc/2/

編集:解決済み、

+1

をあなたはIE7をサポートする必要がありますか?そうでなければ、 'display:table-cell'を使うことができます。 [例](http://stackoverflow.com/questions/6708816/3-columns-center-column-fixed-sides-fill-parents/6708947#6708947) – thirtydot

+0

魅力のように働いたたくさんの感謝、@thirtydot! IE7のサポートは必要ありません。 –

答えて

0

は、私は@thirtydotから私の質問への答えを得ました(上記のコメントを参照):

IE7をサポートする必要がありますか?ない場合は、ディスプレイを使用することができます:テーブルセル

+0

回答を受け入れられたとしてコメントを設定する方法を見つけようとしましたが、良い方法を見つけることができませんでした。このように自分自身で回答を投稿するのが間違っていたら、私を修正してください。 –

+0

ここで、テーブルセルプロパティを追加しますか? – blessenm

0

ああ、老いた2列のレイアウトの下のコメントを参照。ある列の高さを追跡して他の列を調整するためにJavaScriptに頼っているのでない限り、期待どおりに行うことはできません。 height = "100%"を使用すると、通常、これらの状況では動作しません。

あなたはになります。は、古いFaux Column技術のようなものです。 divのサイズは変更されませんが、垂直方向にタイルする親要素の背景イメージがあり、等しい列の錯覚を与えます。オールドスクール、はい、しかし効果的です。

+0

残念ながら、私は同じ高さの2つの列が必要なので、これは動作しません。その理由は、右の列の中央(垂直方向)にボタンを配置する必要があるからです。 –

+0

ああ - そう、偽の列は動作しません。あなたがその入力にthirtydot – chipcullen

0

JavaScriptを使用して左の高さを取得することができますdiv、次に右divをこの高さに設定します。右のdivの高さを設定するには

var divHeight = document.getElementById('left').offsetHeight; 

:左のdivの高さを取得するには

ので

document.getElementById('right').style.height = divHeight+'px'; 

Your JSFiddle example fixed.

+0

おかげで良いアイデアを得たように見えますが、私はそれはJavascriptをせずに動作するようにする必要があります。 Thirtydotはソリューションを提供しましたが、上記を参照してください。 –

関連する問題