JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/7072153/static-container-height-combined-with-a-dynamically-sized-container-possible

by tw16

HTML

<div class="header">
    stack height
</div>
<div class="content">
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and overflow use scrolling on the container
    take up the rest of the view port and...

CSS

html, body {height:100%; padding: 0 !important;}
.header{
    height: 200px;
    border: 1px solid green;
}
.content{
    border: 1px solid red;
    overflow-y: auto;
    overflow-x: hidden;
}

JavaScript

$(function () {
    adjustHeight();
});

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

function adjustHeight() {
    var windowHeight = $(window).height() - 2;
    var headerHeight = $('.header').outerHeight();
        
    $('.content').height(windowHeight - headerHeight);
}