bottom: 0 doesn't work in Firefox with fixed positioning
<p>I have a <a href="https://write.as/pad" rel="nofollow">simple page</a> with a <code>textarea</code> that I want to fill the entire screen, except for a bit at the top. It works perfectly in Chrome but doesn't stretch to the bottom of the window in Firefox. This is the CSS I'm using:</p>

<pre><code>body#pad textarea {
  position: fixed;
  top: 3em;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;

  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  padding: 1em 2em 2em;
  resize: none;
}
</code></pre>

<p>When I add <code>height: 100%</code> it does reach 100% in height, but that's not what I want, since it needs a little space at the top of the screen. Is there any <em>pure CSS</em> way to fix this? I'd really like to make it look and function like it does in Chrome without any Javascript.</p>