Div with dynamic header size and content with scroll bar

Question

I am trying to create a container div with a fixed height which has two divs inside, a header div and a content div. The header can grow dynamically and I want the content div to take the rest of the space. The container div should not exceed the specified size and if the content grow to much then content div should scroll.

My current code is as follows but is not working:

<div id="container">
   <div id="header">
        <button id="btnHeader" type="button">Increase Header</button>MY HEADER</div>
<div id="content">
    <button id="btnContent" type="button">Increase Content</button>MY CONTENT</div>
</div>

#container {
     height: 300px;
     width: 400px;
     max-height: 300px;
     background-color: grey; 
}
#header {
     width: 100%;
     height: auto;
     background-color: blue;
}
#content {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     background-color: red;
}

Example here: http://jsfiddle.net/ep1qab0v/

What is happening is that the content div always stays the same size and hence make the container div to grow. Any ideas?

Answer 1

http://jsfiddle.net/ep1qab0v/3/ ,

I have updated the fiddle with overflow:hidden on the container div. which keeps it the same size. increase in content adds scroll bar to the content div and increase in header pushes the content div down. If I have understood your requirement correctly this is what you are looking for ?

Answer 2

I have made a fiddle with the answer, but I will also try to explain. jsfiddle Example

For that level of dynamic sizing you will have to use javascript. Since the content is scrollable and the header is not, you will have to create an object or function that is called everytime the header size changes. This way you can test the height of the header against the main container, and change the content box to fit.

I created a simple object that you can use to initialize the boxes when the page loads. Also, that you can call every time the page is resized or the header size is changed.

var sizing = {
    height: null,
    header: null,
    content: null,

    //Initializes whatever you need
    //just cacheing the header and content
    //and setting the height restriction
    init: function(){
        //Set the height of the users window
        //you can change this to whatever you want
        //but this is dynamic to the browser window
        this.height = window.innerHeight ? window.innerHeight : $(window).height();
        //Set header and content elements
        //for later use
        this.header = $('#header');
        this.content = $('#content');

        this.resize();
    },

    //Ressize the boxes to fit
    //this needs to be called after
    //  every change to the header
    resize: function(){
        this.content.css({
            height: (this.height - this.header.height()) + "px"
        });
    }
};

You need to call the .init() to initialize the object when the page loads

$(document).ready(function(){
    //Whatever you need to do

    //Initialize the sizing
    sizing.init();
});

then you can call it from inside events

$('body').on('click', '#some-element', function(e){
    //Do some stuff

    //Then resize the divs
    sizing.resize();
});

Hope that helps!