Горизонтальная полоса прокрутки вопрос высота с 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; } 

Все в порядке с Chrome/Firefox/Safari, но не с IE9. Похоже, что высота горизонтальной полосы прокрутки (около 15 пикселей) подсчитывается в пределах высоты элемента #main. Таким образом, высота 15px в нижней части элемента #main скрыта за элементом #footer.

Не могли бы Вы помочь мне?

Edit: вот пример вопроса ...

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; 
}