Make a div full screen like a background - html

Question

I have the following:
http://jsfiddle.net/B6dFk/embedded/result/
Excerpts:
HTML:
<div id="aboutback">
This is a background
</div>
<div id="workback">
This is another background
</div>
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">
<p>About</p>
</div>
<div id="aboutsub">
<div id="team" class="menu2">
<p>Team</p>
</div>
<div id="experience" class="menu2">
<p>Experience</p>
</div>
<div id="difference" class="menu2">
<p>Difference</p>
</div>
</div>
<div id="work" class="menu1">
<p>Work</p>
</div>
<div id="worksub">
<div id="services" class="menu2">
<p>Services</p>
</div>
<div id="ourprocess" class="menu2">
<p>Our Process</p>
</div>
</div>
<div id="portfolio" class="menu1">
<p>Portfolio</p>
</div>
<div id="contact" class="menu1">
<p>Contact</p>
</div>
</div>
<div id="outerviewer">
<div id="innerviewer">
<p>
Filler
</p>
</div>
</div>
</div>
CSS
#aboutback
{
position: absolute;
background: #11ac92;
min-height: 100%;
width: 100%;
top: 0;
z-index: -1;
}
I want the #aboutback and the #workback to take up the full background at all times. These will have images in them which i will animate using jquery.
The problem is, when the window isn't full page(so the scrollbar appears) and you scroll down, you see the white nothingness of despair.
It's worth noting I have tried setting the position of the body tag which alters the effect but does not fix it. For example, position:absolute; will push everything left and leave a white space on the right.
Any simple solutions, please?

Answer 1

body{
height:100%;
overflow:hidden;
}

Answer 2

html{height:100%;}
body{height:100%;}
divclass{height:100%;}