Search code examples
javascriptcssfixedtitlebar

Fixed Title Bar without css:fixed

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?

Solution

  • 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