With jQuery how can you make all of the parent divs and body expand in height to accommodate content?

Objective

To have the page the page on my website to expand in height according to the dynamic data pushed into the container.

Background

The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.

I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.

So now I am experimenting with jQuery to see if I could find a solution to this problem.

I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();

And that it needs to have push out the height with something like
$(".case").height(newHeight);

This is my current HTML

<body>
  <div class="container">
    <div class="block push">
      <div id="mainContent" class="row">
        <div class="large-12 columns">
          <h1>Before &amp; After Case Gallery</h1>        
          <div id="casesContainer">
            <div id="carousel"></div>
          </div>

          <script id="casestpl" type="text/template">
            {{#cases}}
              <div class="case">
                <div class="gallery_images_container">
                  <div class="item_container">
                    <div class="gallery_heading">BEFORE</div>
                    <img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
                  </div>
                  <div class="item_container">
                    <div class="gallery_heading">AFTER</div>
                    <img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
                  </div>
                </div>
                <div class="description_container">
                  <p>
                    <span><strong>Case Number {{{number}}} {{version}}:</strong></span>
                    {{{description}}}
                  </p>
                </div>
              </div>
            {{/cases}}
          </script>

The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.

Here is my CSS

html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }

#mainContent {}

#casesContainer {
  min-width:310px;
}
.image-navigation {
  background: rgb(6,6,6);
  color: #fff;
  width:100%;
  max-width: 640px;
  height: 24px;
}
.image-navigation a { 
  color: #fff;
  padding: 6px;
}
.image-navigation-previous, .image-navigation-next{ 
  float:left; 
  width: 50%;
}
.image-navigation-previous {
  text-align: right;
}
.image-navigation-next {
  text-align: left;
}
#carousel {
  height:auto;
  min-height:600px; 
  overflow-y: auto;
}

.case {
  max-width: 640px;
  height:auto;
}
.gallery_images_container {
  clear: both !important;
}
.item_container{
  max-width: 320px;
  float: left;
}
.gallery_heading {
  background: black;
  color: white;
  width: 100%;
  text-align: center;
}
.description_container {
  background: none repeat scroll 0% 0% white;
  min-width: 308px;
  max-width: 640px;
  padding: 6px 6px 12px 6px;
  clear: both !important;
}

I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.

I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?

Solution

Not a complete fix but maybe helpful.

I've used this function but Internet Explore increases the heights on resize.

$(document).on('ready', function() {

//    $(window).on('resize', function() {

    var height1 = $("#r1c1").height();
    if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
    if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }

    $("#r1c1").height(height1);
    $("#r1c2").height(height1);
    $("#r1c3").height(height1);


//    }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.       

});//ready