HTML Layout Dynamic Content height when Footer and Header are fixed

I want to use exactly 100% of the window. The page contains a header, content and footer area.

| HEADER | |-----------| | Content | | | |-----------| |Foot |

The header and a the footer have a fixed height (could change because header and footer will be responsive). Between these blocks we have the content section which should get the remaining space (yellow area in example). Content should be scrollable. Header and Footer should be fixed.

Currently we calculate and set the remaining height with jQuery. This calculation is frequently done on the window.resize event.

Is there another (better) solution or is it maybe possible to use CSS only do adjust the height of the content area?

angular.module('app', [])

.controller('TestController', ['$injector', function($injector) {
  var vm = this;
  vm.headers = ["Header1","Header2","Header3","Header4"];
  vm.contents = []

        for(var i=0; i<35; i++){
        vm.contents.push({
        label: "Label" + i,
      content: "Content" + i
    })
  }
  
  vm.foo = function(){
        alert("Do some magic stuff")
  }

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

#body{
  padding: 15px;
  width: 100%;
  font-size: 16px;
  background-color: #C0C0C0;
}

.header-container {
  border: solid 1px black;
  height: 3em;
  margin-bottom: 1em;
  background-color: #40E0D0;
}

.body-container {
  border: solid 1px black;
  padding: 20px;
  background-color: #F0E68C;
  max-height: 200px;
  overflow-y: scroll;
}

.content-container {
  border: solid 1px black;
  background-color: #F08080;
}

.footer-container {
  text-align: center;
  margin-top: 1em;
  background-color: #40E0D0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div id="body">
  <div ng-controller="TestController as vm">
    
      <div class="header-container row">
        <div class="col-xs-3" ng-repeat="header in vm.headers">
          <div></div>
        </div>
      </div>
      
      <div class="body-container row">
        <div class="row content-container" ng-repeat="content in vm.contents">
            <div class="col-xs-3"></div>
            <div class="col-xs-9"></div>
        </div>
      </div>
      
      <div class="footer-container row">
        <button ng-click="vm.foo()">
             foo
        </button>
      </div>
    
  </div>
</div>