Why does this div element not extend to the top of the screen?

Question

Given the following bit of css

.reveal .fulldiv{
    position:fixed;
    background: green;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

With a simple html file <div class="fulldiv">foo</div> I get what I expect, a green background with foo in the upper left. When I'm using reveal.js to create an HTML5 presentation, I get instead:

I thought that using position:fixed wouldn't care about anything that it is wrapped up in. However it seems respect some container that it is in. How can I get this div to extend the full screen as before?

For completeness, here is the body (without the script calls) used for the picture:

<div class="reveal"><div class="slides">
<section class="vertical-stack">
  <section class="vertical-slide">
    <div class="fulldiv">foo</div>
  </section>
</section>
</div></div>

Answer 1

Your missing a comma in the css

.reveal, .fulldiv{
position:fixed;
background: green;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}