элемент с абсолютным позиционированием не получает высоту 100%

Question

вот мой код (немного упрощенный)

<thisIsADiv id="wrapper" style="width:960px; margin:0 auto; position: relative;">
  <img src="img/bg/wrapper.jpg" alt="" width="960" id="bg" style="position:absolute; top:0; left:0; z-index:0; height:100%;" />
  <some more stuff></stuff>
</thisIsADiv >

вот моя проблема: если я даю своему изображению высоту 100%, он корректно работает в Firefox / Chrome (он растягивает всю оболочку), а в проводнике наследует высоту страницы !! вызывая перегруженную страницу. Я пробовал с помощью height = наследовать, но в Firefox / Chrome изображение не растягивается вообще, в проводнике проблема остается той же. Высота = авто: тоже самое, что и выше в проводнике F / C +, тоже не растягивается.

Есть идеи? Спасибо Vitto

Answer 1

Вместо height:100% используйте bottom:0 на изображении.

Answer 2

вам нужно указать height & width для элементов с абсолютным позиционированием, иногда IE отображается правильно, также вы думаете, что это неправильно из-за FF & Chrome (они исправляют ваш код):

<div id="wrapper" style="width:960px; margin:0 auto;position: relative;">
  <img src="img/bg/wrapper.jpg" alt="" width="960" id="bg" style="position:absolute; top:0; left:0;height:theheightofyourimage;">
</div>

position: absolute автоматически получает z-index 1.

Answer 3

Попробуйте установить высоту на wrapper дел.

Редактировать: IE не нравится z-index: 0;, поэтому установите его равным 1 и соответственно настройте другие индексы, также почему бы просто не использовать фоновое изображение в стиле?