Div with dynamic size header and content with scrollbar

I am trying to create a container div with a fixed height that has two divs inside, a div div and a div div. The header can grow dynamically and I want the div content to take up the rest of the space. The container container should not exceed the specified size and if the content will grow until the content div is scrolled.

My current code looks like this, but doesn't work:

<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>

#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;


An example is here: http://jsfiddle.net/ep1qab0v/

What happens is that the content of the div always stays the same size and therefore increases the container's capacity. Any ideas?


source to share

2 answers

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

I have updated the script overflow:hidden

on the container div. which keeps it the same size. increasing the content adds a scrollbar to the content div, while increasing the heading pushes the content of the div down. If I understand your requirement correctly, is this what you are looking for?



I made a fiddle with an answer, but I'll try to explain as well. Jsfiddle example

For this level of dynamic size, you will need to use javascript. Since the content is scrolling and there is no header, you will need to create an object or function that is called every time the header is resized. This way you can check the header height on the main container and change the content box to match.

I created a simple object that can be used to initialize the boxes on page load. Also, you can call every time the page is resized or the header is resized.

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');


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


You need to call .init()

to initialize the object on page load

    //Whatever you need to do

    //Initialize the sizing


then you can call it from inside events

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

    //Then resize the divs


Hope it helps!



All Articles