Solution for a fixed, dynamic height element to take space

Question

First of all, I am searching for a pure CSS solution. I can do it really easily with JavaScript, so don't bother giving me hint on how to do it in JS.

I have a web page with 3 container. 2 of them are fixed, the other one is static.

I want to give the static container a padding top and bottom equal to the fixed container.

The first fixed element have a fixed height, so that's not a problem, i give a padding equal to the height :

#header{
    height : 100px;
    position : fixed;
}

#content{
    padding-top : 100px;
}

But the second fixed element is dynamic since we are using a CMS. Some element can be added by the client and we want the layout to adjust automatically.

You can easily see what i'm trying to do in this Fiddle, just uncomment the JS to see the desired Result.

---

P.S.: I support iE8 and older.

P.P.S.: I am totally aware that it may be impossible w/o JS. If so, just tell me in comment.

Answer 1

Since #header and #footer are fixed positioned, they are taken out of the document flow and have no relationship to #content anymore.

Therefor you have to options (imho).

1) give the footer a fixed height, so you can do the padding trick, same as with your header.

2) use Javascript, since there is no pure CSS solution (except for 1. point).