CodePen

HTML

            
              <!doctype html>
<html>
  <body>
    
      <div class="controls">
        I am controls for the app
      </div>
    <div class="bigWrapper">
      <div class="sectionWrapper">
      <div class="infoBar">
        I have general information
      </div>
      <div class="addtlInfo">
        Some interesting stuff
      </div>
      <div class="status">
        Ready to go!
      </div>
      <div class="stretchy">
        This box should stretch and take up the appropriate amount of space based on window size
      </div>
      <div class="inputBox">
        This box should not overlap but should stay positioned to the bottom when the window is resized
      </div>
      <div class="footerBar">
        This is a bar that acts as a footer. Needs to be positioned at the bottom
      </div>
      </div>
      <div class="otherSectionWrapper">
        Some other stuff will go here.
      </div>
    </div>
  </body>
</html>
            
          
!

CSS

            
              html {
  overflow:hidden;
}

.bigWrapper {
 width:100%;
  height:100%;
  overflow:hidden;
}

.controls {
  background-color:grey;
  width:100%;
  height:30px;
}

.sectionWrapper {
  width: 50%;
  float:left;
}

.otherSectionWrapper {
  float:left;
  width: 50%;
  background-color:lightgreen;
}

.infoBar {
  background-color:blue;
  width: 100%;
  height:30px;
}

.addtlInfo {
  background-color:orange;
  width:100%;
  height:20px;
}

.status {
  background-color:red;
  width:90%;
  margin: 0 auto;
  min-height:35px;
  
}

.stretchy {
  background-color:green;
  overflow-y:scroll;
  width:100%;
  min-height:50px;
}

.inputBox {
  background-color: violet;
  height:90px;
  width:100%;
}

.footerBar {
  background-color:darkblue;
  width:100%;
  height:30px;
  color:white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* ?? How did we get 235 ??
  .controls  height = 30px
  .infoBar   height = 30px
  .addtlInfo height = 20px
  .status    height = 35px
  .inputBox  height = 90px
  .footerBar height = 30px
                sum = 235px
*/
// I didn't put it into a function or anything reuseable that way you could see
// what i did and replicate it yourself.

/* 1.) Target our div.
   2.) Set it's height property
   3.) Get the windows height minus 235
   4.) Convert into integer and cut off the px
   5.) Total sum plus string 'px' */
$('.stretchy').css('height', parseInt($(window).height() - 235, 10) + 'px');

$(window).resize(function() {
/* Do the same thing as above but whenever the browser is resized */
    var getHeight = $(window).height(),
        heights = 235;
    var n = parseInt(getHeight - heights, 10);
    $('.stretchy').css('height', n + 'px');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................