Top and bottom fixed height with fluid height middle

css, html, responsive-design

Solution

Yes use `calc()` function:

for your 3rd div set `height` CSS property as:

height: calc(h - n - k);

Problem

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 ?

Original source