Растяжение iframe в HTML5 - PullRequest
Новая
       25

Растяжение iframe в HTML5

10 голосов
/ 10 августа 2011

У меня есть два html-файла, один содержит другой с iframe, и я хочу, чтобы этот iframe растягивался на всю высоту родительского html.

Итак, первый html-файл (который имеет красныйфон) выглядит следующим образом: 

<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
    <iframe src="Blue.html" frameborder="0" scrolling="no"  height="100%" width="100%" />
</body>
</html>

Второй (который имеет синий фон): 

<!DOCTYPE html>
<html>    
<body style="background-color: blue;" />
</html>

Если все верно, я ожидаю увидеть только синий фон, потому что iframeдолжен перекрывать всю родительскую страницу, но я вижу только синюю полосу и много красного ...

С типом HTML5 <!DOCTYPE html> Я не могу получить правильный результат:

With HTML5 DOCTYPE

Если я удаляю тип документа HTML5, я получаю желаемый результат.Я думаю, что это потому, что он будет отображать HTML в режиме причуд:

Without HTML5 DOCTYPE

Я действительно хочу, чтобы HTML-тип документа, так как я могу это исправить?Спасибо за внимание!

1 Ответ

24 голосов
/ 10 августа 2011

CSS: 

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }

HTML: 

<div id="wrap">
    <iframe src="..." frameborder="0" id="iframe"></iframe>
</div>

Демонстрационная версия: http://jsfiddle.net/5G5rE/show/

...