jquery - How to arrange div as a dock panel? -

i need know how make following divs aligned , resized according below requirement.

area a area need stayed on top given height. height of area wont changed.

area b height of area b changed between 0 - min-height. when height of b 0, area c should stretched fill area b well.

height of area b increased min-height x (x > min-height). in situation area c should shrink down give space area b.

area c area c filling area of page. need adjust height according area b.

area d area d stayed @ bottom of page , height not changed.

i know possible achieve above css? or need use jquery. if it's possible css? know how?. (i know how jquery)

*i'm using css3/html5

update i've added jsfiddle

also i'm not quite sure question fit question conditions. if not, pls delete this

depends on how far need browser support, typical use case flex box. keep in mind flex box new css feature. work fine on evergreen browsers, not work on ie 8 , 9. see here. i've written blog post address particular layout. here shameless self-promotion link blog post. 1 major pitfall flex box there used old syntax during draft process, different standardized syntax browsers support now. careful that.

the way needs set followings:

1. you need create container contains a, b, c , d. apply display: flex; flex-direction: column; height: 100%; container.

2. a, b, d remain own height. don't need special. set height , content you'd want it.

3. c interesting part. want grow or shrink occupy remaining area. need flex-grow: 1; flex-shrink: 1; flex-basis: 0; or in short form flex: 1 1 0; on element.

if don't want use flex box, safest bet use javascript, how done way in days. want add resize event listener window, measure a, b, d height , assign remaining height c. example, inspect https://jsfiddle.net/ , see id="content" div.