展开内部 div 高度以满足外部 div 高度

Question

我想根据外部 div 改变内部 div 的高度。 在我的情况下，我有两个内部 div 一个具有固定高度，外部 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 高度并相应地改变。然后当外部 div 高度改变时，另一个内部 div 也必须改变它的高度。但它不会。）

Answer 1

试试下面的代码，是的，我已经从父元素中删除了 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;
}

Answer 2

请看这里jsfiddle

我在 2 列（左和右）上使用了 display:table-cell 和 display:table 到 .outer。为此，您需要从引导程序给出的列中覆盖float:left

添加代码

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

或带一点JQ：jsfiddle

代码：

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

如果这就是你要找的东西，请告诉我

Answer 3

更改一些 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/