展開內部div高度以符合外部div高度

Question

我想根據外部div更改內部div高度。 在我的情況下，我有兩個內部div，一個固定高度，外部div根據那個擴展其高度（我在那裏使用'clearfix'）。但我需要其他內部的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高度發生變化時，其他內部div也必須改變其高度，但它不會）。

Answer 1

在這裏看到jsfiddle

我用display:table-cell在2列（左，右）和display:table到.outer。對於這個工作，你需要覆蓋從引導給出的列

代碼添加

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

或用少許JQ的float:left：jsfiddle

代碼：

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

讓我知道這是你在找什麼

Answer 2

更改一些CSS下面的代碼刪除您的評論的代碼

.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

嘗試是的，我有從父元素除去clearflex因爲它透明浮法兩個子元素。當子元素高度增加時，這種增加和減少隱藏，反之亦然，即父元素相同。

.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; 
}