IFRAME не отображает высоту 100% в IE8, но отлично работает в IE11 и Firefox

У меня есть HTML-страница с iframe в div. Высота iframe должна составлять 100% от доступной высоты окна. Это отображается как ожидалось в IE11 и Firefox, но в IE8 iframe остается фиксированным, независимо от размера окна или содержимого iframe. Когда браузер находится в полноэкранном режиме, это примерно 1/3 экрана.IFRAME не отображает высоту 100% в IE8, но отлично работает в IE11 и Firefox

Является ли это причудой IE8? Как я могу получить iframe, чтобы потреблять 100% высоты?

Браузер не находится в режиме совместимости.

Cut вниз пример:

html{ 
 
    height:100%; 
 
} 
 
body { 
 
    display:table; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.row{ 
 
    display:table-row; 
 
    height:100%; 
 
} 
 

 
.iframeContainer{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
.iframeContainer iframe{ 
 
    width:100%; 
 
    height:100%; 
 
    border-style:solid !important; 
 
    border:2px; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <link rel="stylesheet" type="text/css" href="style.css"> 
 
     </head> 
 
     <body> 
 
      <div class="row"> 
 
       <div class="iframeContainer"> 
 
        <iframe></iframe> 
 
       </div> 
 
      </div> 
 
     </body> 
 
    </html>

источник

2015-06-05 Owen Pauling

<!DOCTYPE html> 
<html> 
    <head> 
    <style type=text/css> 

     html,body{ padding:0;margin:0 } 

     html{ 
      height:100%; 
     } 

     body { 
      display:table; 
      width:100%; 
      height:100%; 
      position:relative; 
      background-color:lightcoral; 
     } 

     .row{ 
      display:table-row; 
      height:100%; 
      /*width:100%*/ 
     } 

     .iframeContainer{ 
      /*height:100%;*/ /* use h+w instead of positioning below if outer (coral) frame is undesired */ 
      /*width:100%;*/ 
      /*display:table-cell;*/ 
      position:absolute;top:0;right:0;bottom:0;left:0;margin:1em; 
     } 

     iframe{ 
      width:100%; 
      height:100%; 
      border-style:solid !important; 
      border:2px; 
     } 
    </style> 
    </head> 
    <body> 
     <div class="row"> 
      <div class="iframeContainer"> 
       <iframe src="about:blank" onload="this.contentDocument.body.style.backgroundColor='lavender'" frameborder=0></iframe> 
      </div> 
     </div> 
    </body> 
</html>

Если я понять свою цель в создании тела для отображения: таблицы, то для центрирования. Мне удобнее использовать позицию: технику с верхним, правым, нижним, левым = 0, так как CSS 2.1 одобрил взломать. Что бы ни случилось, я думаю.

Использование таблицы трюк с IE8, он нуждается в iframeContainer обертку быть дисплей: таблицы ячейки. Иначе, как вы объяснили, он не может вычислить ширину + высоту, а затем iframe w + h на основе этого не работает. Но даже с оболочкой таблицы-ячейки она все же затрудняет управление шириной и высотой, без небольшого переполнения окна просмотра. Проведите эксперимент: table-cell demo

Без полного изменения стратегии вашего стола мы можем поместить позиционирование в стиль и заставить IE8 работать. При этом он автоматически меняет размер окна просмотра, не перегружая его. В приведенной выше разметке я пошел дальше и обрамлял таблицу 1em коралловым краем. (потому что в этот момент было легко). Здесь он-лайн: table-cell positioned

источник

2015-06-08 14:50:22 user4749485

Отличный ответ! Спасибо. Дисплей: таблица из-за других вещей на странице, которую я вырезал для простоты. Добавление отображения: table-cell в iframeContainer (а затем обертывание этого в другом div с помощью display: table-row, для работы с материалом, который я нарезал) исправил его. Точка позиционирования также помогла получить таблицу, чтобы она выглядела по желанию. –

-1

Вы можете попробовать

height: 100vh;

Это сделало бы IFrame 100% высоты окна просмотра

источник

2015-06-05 09:53:47 csb

Спасибо за предложение. Я попробовал, но это не решило проблему. –

Извините, просто прочитал на vh, похоже, что он не поддерживается на ie9. Я сделал быстрый тест, и это, похоже, сработало. Ваш браузер не поддерживает iframes. – csb

Вы можете нацелить только IE8 и менее версии IE-браузеры с CSS c комментарии.

Метод -1

<!--[if lte IE 8]> 
<style type="text/css"> 
* html, body { height: 100%; width:100%; margin:0; padding:0; } 
iframe { padding-bottom: 0; height:100%; } 

</style> 
<![endif]-->

Способ -2

html, body{ 
height: 100%; 
margin: 0; 
padding: 0; 
}

Метод -3

<iframe width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" src="/chatbox/testb.html"></iframe>

100% высота IFrame с содержанием

enter image description here

Тем не менее 100% высоты IFrame без содержания.

enter image description here

источник

2015-06-08 09:39:35 Prime

Благодарим за ответ. Однако, когда я подключаю любое из этих предложений в код примера, я по-прежнему получаю ту же проблему, что и IFRAME, не потребляющий оставшееся пространство экрана в IE8. –

@OwenPauling, я также использую IE8 на своем ПК. Проверьте отредактированный ответ с помощью скриншотов – Prime

IFRAME не отображает высоту 100% в IE8, но отлично работает в IE11 и Firefox

ответ

Смежные вопросы