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>
            
          
!
via HTML Inspector

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

            
              // all elements should resize width-wise when the window resizes. Only the 'stretchy' element should resize width and height-wise

// The window must be completely filled height-wise at all times.

// the overflow hidden is on purpose...it's supposed to act like a scroll-less desktop app...

// it needs to work height-wise for minimum 740px height resolutions and up


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................