HTML5でiframeを伸ばす

私は2つのhtmlファイルを持っています。もう1つはiframeを含んでいます。このiframeを親htmlの全高に伸ばしたいと思っています。HTML5でiframeを伸ばす

だから、（赤色の背景を持っている）最初の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 <!DOCTYPE html>私は、正しい結果を得ることができないようです。

With HTML5 DOCTYPE

私はHTML5のDOCTYPEを削除した場合、私は私が望む結果を得ます。私はそれがQuirksモードでHTMLをレンダリングしますので、これはあると思う：

Without HTML5 DOCTYPE

私もHTMLのDOCTYPEをしたいですので、どのように私はこの問題を解決することができますか？見てくれてありがとう！

出典

2011-08-10 Arcturus

私は私の[W3ビューア]（http://w3viewer.comでそれをやっています）。トリックはIFRAMEをDIVに入れることです。次に、ページ全体をカバーするようにDIVを絶対的に配置し、 'width：100％;高さ：100％; IFRAMEの上に。 –

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/

出典

2011-08-10 13:39:44

この問題がなぜ発生し、どのように位置が固定されて問題を解決するのか説明してください。ありがとうございました！ – Jay

@Jay OPはIFRAMEの高さを100％に設定しました。このパーセンテージは、包含ブロック（この場合はBODYエレメント）に関するものです。しかし、BODY要素の高さは、デフォルトでコンテンツの高さによって異なります。これは循環依存です。BODYの高さはIFRAMEの高さに依存し、その逆もあります。これは明らかに機能しません。 BODY要素とHTML要素の両方の高さを100％に設定できます。これはうまくいくでしょう。私は固定された配置を好む - それはより柔軟です（1つは位置と次元の両方を正確に定義できます）。 –

ŠimeVidasありがとうございました！ – Jay

HTML5でiframeを伸ばす

答えて

関連する問題