http://stackoverflow.com/questions/27449727/adjust-height-to-remaining-window-height-on-resize

Adjusting element height on window resize

by Csaba Hellinger

HTML

<div class="header">
  <p>Header</p>
  <p><strong>This should not scroll</strong></p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
</div>
<div class="adjustedHeight">
  <p>Content</p>
  <p><strong>Only this section should scroll</strong></p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

CSS

.header {
  background-color: #55aaff;
}

body {
    overflow-y: hidden;
}

.adjustedHeight {
    overflow-y: scroll;
}

JavaScript

var adjustHeight = function(){
  $content = $('.adjustedHeight');
  $content.height($(window).height()-$content.offset().top);
}

$(document).ready(function(){
  adjustHeight();
});

$(window).resize(function(){
  adjustHeight();
});