CodePen

HTML

            
              <div class="bigWrapper">
    <div class="controls"></div>
    <div class="sectionWrapper">
        <div class="infoBar"></div>
        <div class="addtlInfo"></div>
        <div class="status"></div>
        <div class="stretchy"></div>
        <div class="inputBox"></div>
        <div class="footerBar"></div>
    </div>
    <div class="otherSectionWrapper">&nbsp;</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html {
  overflow:hidden;
}

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

.controls {
  background-color:grey;
  width:100%;
  height:10vh;
}

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

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

.infoBar {
  background-color:blue;
  width: 100%;
  height:14vh;
}

.addtlInfo {
  background-color:orange;
  width:100%;
  height:14vh;
}

.status {
  background-color:red;
  width:90%;
  margin: 0 auto;
  height:14vh;
}

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

.inputBox {
  background-color:violet;
  height:14vh;
  width:100%;
}

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

JS

            
              $(window).resize(function() {
    $('.controls').css('height','10vh');
    $('.otherSectionWrapper').css('height','90vh');
    $('.infoBar').css('height','14vh');
    $('.addtlInfo').css('height','14vh');
    $('.status').css('height','14vh');
    $('.stretchy').css('height','24vh');
    $('.inputBox').css('height','14vh');
    $('.footerBar').css('height','10vh');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................