title: Horizontal scrollbar height issue with IE9
body: <p>I have an element which looks like this at the top of my website:</p>
  
  <pre><code>#top { position:fixed;top:0;left:0;margin:0;padding:0;height:60px;width:100%; }
  </code></pre>
  
  <p>I have an other element which looks like this at the bottom :</p>
  
  <pre><code>#footer { margin:0;padding:0;position:fixed;height:60px;bottom:0;left:0;width:100%; }
  </code></pre>
  
  <p>Between these two elements, I have finally a #main element in the middle like this :</p>
  
  <pre><code>#main { margin:0;padding:0;position:absolute;top:60px;left:0;bottom:60px;width:3000px; }
  </code></pre>
  
  <p>Everything is OK with Chrome / Firefox / Safari but not with IE9. It looks like the height of the horizontal scrollbar (which is about 15px) is counted within the height of the #main element. So the 15px height area at the bottom of the #main element is hidden behind the #footer element.</p>
  
  <p>Could you please help me ?</p>
  
  <p>Edit : <strong>here is an example of the issue...</strong></p>
  
  <p><a href="http://statosphere.fr/stackoverflow/test.php" rel="nofollow">http://statosphere.fr/stackoverflow/test.php</a></p>
  
  <p>With Chrome and Firefox, you can see the entire yellow square (30x30px). But with IE9, you can't see the bottom of the yellow square, hidden behind the red footer.</p>