如何设置我的divB高度等于同一divA内的另一个divC

Question

＆＃13;

＆＃13;

#divA {
  width:100%;
  border: 2px red solid;
}

#divB {
  border: 2px blue solid;
  width:68%;
  float:left;

}

#divC {
  border: 2px green solid;
  width:28%;
  height:80px; 
  float:right;
}

＆＃13;

<div id="divA">
      <div id="divB"></div>
      <div id="divC"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

我可以从ajax输入一些数据并输入divC，所以divC的高度是动态的，我想设置divC的高度在divC高度变化时等于divC。

如何设置divB高度等于同一divA内的另一个divC？

Answer 1

第一个选项：Flexbox

Flexbox可以通过添加到父

的单个属性来实现

#divA {
  width:100%;
  border: 2px red solid;
  display:flex;
}

也可以通过向父级添加justify-content:space-between来实现间距。

Support是IE10＆amp;达

#divA {
  width: 100%;
  border: 2px red solid;
  display: flex;
  justify-content:space-between;
}
#divB {
  border: 2px blue solid;
  width: 68%;
  float: left;
}
#divC {
  border: 2px green solid;
  width: 28%;
  height: 80px;
  float: right;
}

<div id="divA">
  <div id="divB"></div>
  <div id="divC"></div>
</div>

第二个选项：CSS表格

#divA {
  width: 100%;
  border: 2px red solid;
  display: table;
}
#divB {
  border: 2px blue solid;
  width: 68%;
  display: table-cell;
}
#divC {
  border: 2px green solid;
  width: 28%;
  height: 80px;
  display: table-cell;
}

<div id="divA">
  <div id="divB"></div>
  <div id="divC"></div>
</div>

警告：正如您所看到的那样，您失去了对间距的控制，尽管这对于增加的浏览器Support来说是一个很小的代价，即IE8 +

Answer 2

使用jQuery，你可以这样简单：

@InboundChannelAdapter

$('#divB').height( $('#divC').height() );

#divA {
  width: 100%;
  border: 2px red solid;
}

#divB {
  border: 2px blue solid;
  width: 68%;
  float: left;
}

#divC {
  border: 2px green solid;
  width: 28%;
  height: 80px; 
  float: right;
}

Answer 3

Javascript解决方案

在你的ajax回调中，在将数据附加到divC后，将divB height设置为divC。

像这样：

$.ajax({
      url:"your uel",  
      success:function(data) {
       $('#divC').html( data );
       //OR may be append
        //$('#divC').append( data );
        newHeight = $('#divC').height();
        $('#divB').height( newHeight );
      }
   });