Fixed Title Bar without css:fixed

Question

I need to create a css layout with two sections, a title bar and content.

The title bar needs to be 55px and the content fill the rest of the page. I cannot use the position:fixed element. I am currently using javascript to set the height like this:

document.getElementById("content").height = (window.innerHeight - 55) + "px";

But I would like to use an all css layout, is it possible?

Answer 1

In newer browsers that support css3 it is, you can use the calc() function in css. In your case it would look something like:

#content
{
    height: calc(100% - 55px);
}

You can find more documentation Over here

Answer 2

You don't need to use JavaScript for this. Get to know with this example better - 100% height layout. Worked for me numerous times.