css - 修复响应式网页中的 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求父辈高度并将 child 高度设置为父辈高度
Javascript

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