javascript - How to build this layout with CSS?

Question

I'm not new at CSS, but this is problem for me and I can't solve it. I need to build layout as below:

Divs that are at the bottom and at the top have fixed heights. The one in the center have to be exacly in the height of PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT or in some cases smaller.

Also it have to had this size setted because I predict that sometimes it's content will be bigger than it and then it will need a scrollbar inside.

I will accept case when DIV2 will be smaller, but never too big to fit to page size with DIV1 and DIV3.

Any solutions will be good, not only using CSS, but if you have an idea you can throw some Javascript too... I will be grateful for any solution.. even not fully correct :)

Answer 1

I believe you want something like this

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>