Dividing HTML page into horizontal sections, without vertical scrollbars - html

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);}

Answer 2

To make it work on old browsers, you could use absolute positioning.
Demo
#container {
position: relative;
}
main {
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
background: green;
}

Answer 3

You are already using % to set height... Why don't you use it again to solve your problem?
header {
height: 10%;
background: gray;
max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
height: 90%;
background: green;
}
PS: The only time your header is going to be smaller than 50px is when the browser is smaller than 500px (which will be only in some landscape mobile devices)
EXAMPLE