CSS - Horizontally splitting a page in half

Question

I'm trying to have a page divided in half, horizontally. I want to accomplish it just by HTML/CSS and I'd prefer not to use JS. What am I doing wrong?

Thanks

CSS

#container {
min-height:100%;
}

#top_div {
height:50%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}

#bottom_div {
height:50%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}

HTML

<div id="container">

<div id="top_div">top</div>    
<div id="bottom_div">bottom</div>

</div>

Answer 1

Try this:

body, html, #container {
  height: 100%;
}