Expand内側のdivの高さを外側のdivの高さに合わせる

Question

外側のdivに従って内側のdivの高さを変更したい。 私の場合、私は固定された高さを持つ2つの内側divsを持ち、外側divはそれに応じて高さを広げます（私はそこに 'clearfix'を使用します）。しかし、私は他の内側のdivも、外側のdivの高さにその高さを変更する必要があります 高さ：100％;動作しませんでした。 これは私の問題を示すJsFiddleのリンクです。 https://jsfiddle.net/qjsqxk7j/18/

HTML - >

<div class="outer clearfix"> 
    <div class="col-xs-3 left"> 
    </div> 
    <div class="col-xs-9 right"> 
    <div class="inner"> 
    <label>sssss</label> 
    <button class="btn-default"> 
     sss 
    </button> 
    </div> 
</div> 

CSS - >

.right { 
    height: 100%; 
    background-color: blue;  
} 
.left { 
    height: 200px; 
    background-color: red; 

} 
.inner{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%) 
} 
.outer { 
    background-color: yellow; 
    position: relative; 
    max-width : 500px; 
} 

実は私はブルーが残っすべての黄色のスペースを取るDIV、ボタンやラベルがその垂直中央に来たいと思います。 （私の外側のdivが内側のdivの高さの1つを取得してそれに応じて変更したい場合、外側のdivの高さが変更されたとき、内側のdivも変更されなければなりません）。

Answer 1

私は.outerに2列（左と右）のdisplay:table-cellとdisplay:tableを使用し、ここでjsfiddle

を参照してください。 jsfiddle

コード：

var hgt = $(".outer").height() 
$(".left").height(hgt) 

これが機能するためにあなたは float:left

ブートストラップ

によって与えられた列からのコードが

.left,.right { 
display:table-cell; 
float:none; 
vertical-align:middle; 
} 
.outer { 
display: table; 
} 

または少しJQとを追加上書きする必要があります

あなたが探していたものかどうかお知らせください

Answer 2

changeいくつかのCSSコードの下に試してみて、はい、私は両方の子要素にとって透明フロートとして、親要素からclearflex削除しているあなたのコメントコード

.right { 
    height: 200px; 
    background-color: red; 

} 
.left { 
    height: 100%; 
    background-color: blue;  
} 
.inner{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.outer { 
    background-color: yellow; 
    position: relative; 
    max-width : 500px; 
    height:200px; 

} 

https://jsfiddle.net/qjsqxk7j/25/

Answer 3

を削除します。これは、子要素の高さが増加すると隠蔽され、親要素については同じです。

.outer{ 
    width:100%; 
    height:auto; 
    background:yellow; 
    position:relative; 
    border-bottom:1px solid #111; 
    display:table; 
} 
.outer > .right{ 
    width:50%; 
    height:auto; 
    background:red; 
    float:left; 
    word-break : break-all; 
} 
.outer > .left{ 
    width:50%; 
    height:auto; 
    background:blue; 
    float:left; 
}