Question

我想根据外部div更改内部div高度。在我的情况下，我有两个内部div，一个具有固定高度，外部div根据它扩展其高度（我在那里使用'clearfix'）。但我需要另一个内部div也将其高度更改为外部div高度身高：100％;不工作。这是一个显示我的问题的JsFiddle链接。 https://jsfiddle.net/qjsqxk7j/18/

HTML - ＆gt;

<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 - ＆gt;

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

实际上我希望Blue div占据所有黄色空间，按钮和标签到达垂直中心。（我希望我的外部div得到它的一个内部div高度并相应地改变。然后当外部div高度改变时，另一个内部div也必须改变它的高度。但它不会。）

Answer 1

尝试以下代码，是的，我已从父元素中删除clearflex，因为它清除了两个子元素的float。当子元素高度增加时，这会增加和减少它的隐藏，反之亦然，即父元素相同。

  .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

更改一些css删除您的评论代码

ctx.fillText(" ", textX, textY);

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

Answer 3

请参阅此处jsfiddle

我在2列（左和右）和display:table-cell到display:table上使用了.outer。要使其工作，您需要覆盖bootstrap

给出的列中的float:left

已添加代码

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

或稍微 JQ：jsfiddle

代码：

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

让我知道这是否是您正在寻找的

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

3 个答案: