Fix DIV height in a responsive webpage

Question

I'm using bootstrap and my site is a responsive site.

In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).

My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.

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

This is how it is at the moment (based on the responsive tab height):

This is what I expect it to be (to be based on the dynamic content height):

Answer 1

for row you should use relative after that you can achieve it

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;

}

Answer 2

Basically if you are using jquery the answer will be the following: Working example: 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%;
}

Use JQuery to find height of parent and set the child's height to parent's height
Javascript

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