divの高さは別のdivの高さに依存します。

Question

まあ、私は、このようなシンプルなのdiv構造を有する：#1の

<div id="wrapper"> 
    <div id="1" class="block"> 
    1    
    </div> 
    <div id="2" class="block"> 
    2 
    </div> 
</div> 

JS Fiddle

コンテンツを動的ジャバスクリプトによって変更することができ、その高さを変更することができ、コンテンツの依存しました。私が欲しいのは、#2を#1と同じ高さにすることです。私はこの目的のためにjavascriptを使うことができると理解していますが、CSSだけを使ってdivの高さを等しくする方法や、divの位置を変更する方法などいくつかの方法が必要であることを示唆しています。

Answer 1

私のコメントを拡大するには、それを意味論的に行うことはできません。あなたは100％の高さを偽造するために少しトリックを使わなければなりません。これは偽の列と呼ばれ、さらに読むことができるhere。あなたのケースでは

、我々はできる、いくつかの背景divを追加して、それを偽：

<div class="background bg1"></div> 
<div class="background bg2"></div> 

が続いそうのようなあなたのCSSを変更：

#wrapper { 
    border: 1px solid black; 
    position: relative; 
} 

#wrapper:after { 
    display: block; 
    content: " "; 
    height: 0; 
    clear: both; 
} 

.block { 
    position: relative; 
    float: left; 
    vertical-align: top; 
    width: 200px; 
    text-align: left; 
    min-height: 200px; 
    padding-left: 20px; 
    z-index: 2; 
} 

.background { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    z-index: 1; 
} 

.bg1 { 
    background-color: #eee; 
} 

.bg2 { 
    left: 200px; 
    background-color: #aaa; 
}​ 

はここで働いてjsFiddleです。

Answer 2

jQueryウェイ：Div1の高さを返すには.height（）を使用し、div2をDiv1の高さに設定するには.css（）を使用します。 divが1つ変更されると、resizeイベントを使用してdiv2の高さを変更する関数をトリガすることができます。

CSSの方法：クリスチャンヴァルガの答えは完璧に動作しているようです。