100% height/width using CSS3 calc()

by brian428

HTML

<header>
            Header
    </header>
    <div id="Container">
        <div id="Left">I'm in the left menu</div>
        <div id="Right">
            <div id="Content">Content</div>
            <footer>Fotter</footer>
        </div>
    </div>

CSS

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

header, footer
{
    height: 50px;

    background-color: yellow;
    text-align: center;
}
#Container, #Content
{
    height: calc(100% - 50px);
    overflow: auto;
}
#Left, #Right
{
    height: 100%;
}
#Left
{
    float: left;
    background-color: black;
    color: white;
}
#Right
{
    overflow: auto;
}