Dividing HTML page into horizontal sections, without vertical scrollbars

Question

I'm trying to create something like this:

http://jsfiddle.net/S6FUQ/

HTML is:

<div id="container">
    <header></header>
    <main>
        <section class="half"></section>
        <section class="half"></section>
    </main>
</div>

And CSS is:

* {
    margin: 0; padding: 0;
}
html, body, #container {
    height: 100%;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: 100%;
    background: green;
}
.half {
    height: 50%;
}
.half:first-child {
    background: blue;
}
.half:last-child {
    background: yellow;
}

In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.

I tried margin-bottom: 50px; for main, but it didn't work. What should I do?

Answer 1

Height of "main" should be 100% - 50px. Here is the fiddle.

main{height: calc(100% - 50px);}