L'étirement de l'iframe en HTML5

J'ai deux fichiers html, l'un contient l'autre avec un iframe, et je veux faire cette iframe s'étendent sur toute la hauteur de la mère html.

Donc le premier fichier html (qui a un arrière-plan rouge) ressemble à:

<!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>

La deuxième (qui a un fond bleu):

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

Si toutes les choses sont correctes je m'attends à voir seulement un fond bleu, parce que l'iframe devrait recouvrir l'ensemble de la page parent, mais je ne vois qu'une bande de bleu, et tout un tas de rouge..

Avec le doctype HTML5 <!DOCTYPE html> je n'arrive pas à obtenir le résultat correct:

L'étirement de l'iframe en HTML5

Si je supprime le doctype HTML5-je obtenir le résultat que je souhaite. Je pense que c'est parce qu'il va rendre le code HTML en mode quirks:

L'étirement de l'iframe en HTML5

Je veux que les doctype HTML bien, alors comment puis-je résoudre ce problème? Merci pour regarder!

Je fais cela avec mon W3 Viewer. L'astuce est de mettre une IFRAME dans une DIV. Ensuite, la position de la DIV absolument de sorte qu'il couvre l'ensemble de la page, et de définir width:100%; height:100%; sur l'IFRAME.

OriginalL'auteur Arcturus | 2011-08-10

  1. 24

    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>

    Démo Live: http://jsfiddle.net/5G5rE/show/

    Pourriez-vous expliquer pourquoi ce problème se produit et comment le position:fixed résout le problème? Merci!!!!
    OP, était à la hauteur de l'IFRAME à 100%. Ce pourcentage est en ce qui concerne le bloc contenant - dans ce cas, l'élément de CORPS. Toutefois, la hauteur de l'élément de CORPS, par défaut, dépend de la hauteur de son contenu. C'est une circulaire de la dépendance à la hauteur de l'ORGANISME dépend de la hauteur de l'IFRAME, et vice versa. Cela ne fonctionne pas, évidemment. On pourrait définir la hauteur de la fois le CORPS et les éléments HTML à 100% - qui serait à l'œuvre. Je préfère correction du positionnement - c'est plus souple (on peut définir à la fois la position et les dimensions précisément).
    Merci Šime Vidas pour l'explication!
    Le w3c site web de l'école suggère que le volume admissible des unités pour la hauteur et la largeur est limitée à pixels (pas pour cent). Ce qui donne? w3schools.com/html5/tag_iframe.asp
    Notez qu'il existe une différence entre les attributs HTML et CSS propriétés. La valeur de la width attribut HTML est en effet limitée à une valeur entière (ce qui représente une valeur en pixels), cependant, la width propriété CSS peut contenir une valeur en pourcentage, des pixels, des ems, et un tas d'autres unités. *** L'IFRAME doit être placé à l'intérieur d'un élément qui a position: fixed. Je préfère utiliser un DIV à cette fin, que je place directement dans le CORPS.

    OriginalL'auteur