CSS: Fixed Header and Fluid iframe

Question

css

I rummaged through Googledex, I can’t find a clear solution without javascript for such a layout:



“Hat” of a fixed height, 100 px. The "content"-iframe takes up all the remaining space.

How?

Experience sandbox: jsfiddle.net/Yy9vF/12/

Answer 1

And the good old tabular solution will not suit you? The trick is that the iframe inside the td expands only by its size, so if you create a table with two cells and specify 100% height for the table and 100 pixels for the first cell, then the remaining cell will take up the rest of the space, and the frame placed in it will not crawl out of it framework.
Something like this: jsfiddle.net/KqrPd/

Answer 2

This will not work?
.content
{
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background-color: #8cc;
overflow: auto;
}

Answer 3

jsfiddle.net/Yy9vF/39/
A solution without tables, but without support for most browsers
Actually, it is only intended to draw your attention to the box-sizing property )
(apparently due to styles, a small indent is added somewhere in jsfiddle, which causes scrolling (this will not happen in the browser)