水平滾動條的高度問題與IE9

Question

我有一個看起來像這樣在我的網站頂部的元素：

#top { position:fixed;top:0;left:0;margin:0;padding:0;height:60px;width:100%; } 

我有一個看起來像這樣在底部的其他元素：

#footer { margin:0;padding:0;position:fixed;height:60px;bottom:0;left:0;width:100%; } 

這兩個元素之間，我有這樣的中部終於#main元素：

#main { margin:0;padding:0;position:absolute;top:60px;left:0;bottom:60px;width:3000px; } 

一切皆與OK Chrome/Firefox/Safari但不支持IE9。它看起來像水平滾動條（大約15px）的高度計算在#main元素的高度內。因此#main元素底部的15px高度區域隱藏在#footer元素後面。

你能幫我嗎？

編輯：這裏是問題的一個例子...

http://statosphere.fr/stackoverflow/test.php

隨着Chrome和Firefox，你可以看到整個黃方（30x30px）。但是對於IE9，你不能看到隱藏在紅色頁腳後面的黃色方塊的底部。

Answer 1

似乎是滾動條IE9特定的問題。

嘗試它包裹在一個<div>包含width像這樣：

HTML：

<div id="maincontainer"> 
    <div id="top"></div> 
    <div id="main"> 
     <div id="element"></div> 
     <div id="footer"></div> 
    </div> 
</div> 

CSS：

#maincontainer{ 
    width:3000px; 
}