Top and bottom fixed height with fluid height middle

Question

What I am going to ask is something that I did using javascript but I do want to achieve it with css only (if possible )

Here is the scenario:

I have a DIV element which height is h px. This very DIV element has 3 childs which are DIV elements too. Their purpose is the following:

First DIV element is k px height and is attached to the top of the parent container. Its height is constant.

Second DIV element is n px height and is attached to the bottom of the parent container. Its height is constant.

Third DIV element is h - (n+k) px.

What I want is when I resize the parent div ( which is a floating box ) to automatically keep the third DIV element h - (n+k) px.

Is this possible to be achieved with css only ?

Answer 1

Yes use calc() function:

for your 3rd div set height CSS property as:

height: calc(h - n - k);