2012-01-12 4 views
1

divを2つのdivに分けました。それらは垂直に整列しています。さて、下位のdivはjavascriptでサイズを変更しています。私が今したいのは、上位divが他のdivサイズに応じてサイズを変更していることです。 jsを使わずにCSSスタイルでのみこれを行う方法はありますか?他のdivのサイズに応じたdivのサイズ

更新:外側のdivは固定サイズです。

<div> 
<div> childdiv 1</div> 
<div> childdiv 2</div> 
</div> 

更新:私はこのことを十分にはっきりさせなかった。下のボックスは、その高さを上方向に変更していた。そして、上のdivはその高さを下げるべきです。

+2

HTML/CSSを追加できますか? [テストケース](http://jsfiddle.net/)も便利です。 – thirtydot

+0

私たちに見せるためにいくつかのコードを置くことができますか? – ssdesign

+0

私はこの問題を尋ねるために私の問題を簡素化しました。実際には、すべてが別々のクラスに分かれていました。だからここに投稿するのは難しい。しかし、この問題に対する一般的な答えはありませんか? – Pathos

答えて

2

これに応じて、上部のdivの高さを変更するには、display:tabledisplay:table-rowを使用すると、tota http://jsfiddle.net/bRg6m/

が、これはあなたが欲しいものです:あなたがここに例を見つけることができます

#outer{ 
    display:table; 
    height:200px; 
    width:200px; 
} 

#inner1{ 
    background-color:red; 
    display:table-row; 
} 

#inner2{ 
    background-color:green; 
    display:table-row; 
    height:30px; 
} 

:リットルの高さは、コンテナの固定の高さと一致しますか?

追加:これはIE7以前では機能しません。これらのブラウザをサポートするには、Javascriptソリューションを使用する必要があります。

+0

これは有望に見える、私は今夜これを試してみる。 – Pathos

2

あなたの質問が分かりません。 ここでは、上のdivが下位のdivサイズに応じて幅を変更している例を示しました。それはあなたが必要とするものですか?

http://jsfiddle.net/8fwXR/

HTML

<div id="wrapper"> 
    <div id="box1"></div> 
    <div id="box2"></div> 
</div> 

CSS

#wrapper { 
    float: left; 
} 

#box1 { 
    background: red; 
    height: 100px; 
    width: 100%; 
} 

#box2 { 
    background: green; 
    height: 100px; 
    width: 400px; 
} 
+0

あなたの例では、box1はそのサイズをbox2のサイズだけ大きくする必要があります。 – Pathos

+0

サイズについて話すとき、高さと幅の両方について話していますか? – Filip

+0

高さについて、申し訳ありませんが、私も最初の質問を更新しました。 – Pathos

0

は本当にあなたの設定に依存します。これまでのところ、最も簡単な方法は、両方のDIVに同時にjavascriptコードを適用することです。

最初のDIVの幅を100%に設定すると、2番目のDIVに合わせてサイズを変更する必要があります(サイズ変更によって親DIVの幅も増えるため)が、試してみると問題が発生します高さを一致させるには、純粋なCSSの場合と同様に、最初のDIVには、それ自身の高さを再計算して一致させるための参照がありません。

Example Here

また、代わりに二DIVを作るあなたは親DIVのサイズを変更し、次のようにCSSを設定し、両方の子供を持つことができますサイズを変更:

width:100%; 
height:50%; 
0

することはおそらくこれは私が何を意味するのかである。

document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width 
関連する問題