html - % 単位の iframe の高さが IE で機能しない

Question

タイトルがすべてを物語っていますが、さまざまなブラウザーでは高さ: 61%; 私のCSSを完全に無視して自動的に高さを設定するようです。ピクセルに設定しようとすると問題なく動作しますが、高さをより低い解像度に合わせたいので、ここでは 61% を使用する必要があります。

コード：

#ifrm
{
overflow: hidden;
width: 70%;       /*990px*/
height: 61%;      /*630px*/
border-width: 0px;
margin: 0 auto 0 auto;
float: left;  
}

コンテナーの div の高さは 100% に設定されています

Chrome では次のように表示されます。

そして、これはIEでどのように見えるかです：

私は個人的にこのブラウザが大嫌いです。昨日、アニメーションの SVG を PNG 画像に変更することを余儀なくされました。これは、IE が回転を処理できず、全体がねじれていたためです ^^ 何かアイデアはありますか?

デモは次のとおりです。

http://klaunfizia.pl/damian/

Answer 1

実際、これは IE の問題ではありません。Firefox でも IE と同じように表示されます。

入れてみてください：

html, body{
    height: 100%;
}

これは、ブラウザがデフォルトですべてのブロック要素の幅を 100% に設定しているために発生しますが、これは高さのデフォルトの動作ではありません。

Answer 2

実際に行う必要があるのは、ブロック表示を使用するように iframe に CSS を設定することだけです。その後、身長が尊重されます。

#ifrm
{
overflow: hidden;
width: 70%;       /*990px*/
height: 61%;      /*630px*/
border-width: 0px;
margin: 0 auto 0 auto;
float: left;
display: block;
}