修复响应式网页中的DIV高度

Question

我使用bootstrap，我的网站是一个响应式网站。

连续我有2个div。一个用于响应选项卡，另一个用于主要内容。主要内容是动态的。因此，只有在开始时才将内容加载到此div中。响应性基于div的宽度（而不是高度）。

我的问题：我希望这两个div的高度基于动态内容DIV高度。

HTML：

<div class = "row">
<div class = "col-md-8 classA">
    <div class="classB">
        <div class="classC">
            <div class="classD"></div>
            <div class="classD"></div>
        </div>
    </div>
</div>

<div class="col-md-4 classA">
    <div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>

的CSS：

.classA{
  width: 300px;
  min-height:100px; 
}

.classB {
  position:absolute;
  width: 100%;
}

.classD{
  position: absolute;
}

@media only screen and (min-width : 1224px) {
  .classC{
    width: 75%; /*responsiveness is based on the width here*/
    height: auto; /*I think this is where the issue is?*/
  }
}

A sample Fiddle

这就是目前的情况（基于响应标签高度）：

这是我所期望的（基于动态内容高度）：

Answer 1

基本上如果您使用的是jquery，答案如下： 工作示例：Bootply Link

<强> HTML

<div class="row" id="thedivs">
  <div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
    <div id="C">CCCCCC</div>
      BBBB<br>
    bbbbbbdsbdbsdbsbdbsbsd
  </div>
  <div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
    <div id="A">AAAAA</div>
      DDD
  </div>
</div>

<强> CSS

#A{
background-color: orange;

}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
  height:inherit;
}
#thedivs{
    height:100%;
}

使用JQuery查找父级的高度并将子级的高度设置为父级的高度
的的Javascript

$(function() {
    $('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});

Answer 2

对于你应该使用亲戚的行，你可以实现它

Example

HTML

<div class="row">
    <div class="aclass">A</div>
      <div class="bclass">b</div>
</div>

CSS

.row{
    position:relative;
    max-width:600px;
     background-color:#00ff00;
}
.aclass{
    float:left;
    width:48%;
    height:580px;
    background-color:#ff0000;

}
.bclass{
    position:absolute;
    width:48%;
    right:0;
    top:0
    background-color:#0000ff;

}