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>
</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
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?
source to share
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');
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 .init()
to initialize the object on page load
$(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 it helps!
source to share