IframeとFirefox/IEのバグ

Question

私はコンテンツのためにを試して、音楽プレーヤーのプレイヤーバーにはposition: fixed;を使用して、ページの下部にそれを保持します。

デモ：http://jsfiddle.net/ThinkingStiff/vhLeE/

HTML：

<iframe src="http://thinkingstiff.com"></iframe> 
<div id="player">music player</div> 

はCSS：

body { 
    margin: 0; 
    height: 100%; 
} 

iframe { 
    border: 0; 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

#player { 
    background-color: black; 
    bottom: 0; 
    color: white; 
    left: 0; 
    position: fixed; 
    height: 30px; 
    width: 100%; 
} 

悲しいことに、これはIEまたはFirefix 9ではうまく機能しません、それは単に小さな内のコンテンツを示してい高さウィンドウ：http://cl.ly/0y0T2I1R042c3G002H3y

どうすればこの問題を解決できますか？

Answer 1

これまで私が取り組んできたことで似たような問題を抱えていましたが、幸いにも回避策はとても簡単です。IEとFirefoxはhtmlの高さを100％に設定するだけです。したがって、スタイルの最初の要素を次のように更新してください：

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

これはすべきことです。

Answer 2

また、iframeとdivの高さをパーセンテージで除算することも検討してください。 iframeに100%を指定すると、divによってスクロールバーが非表示になることがあります。

あなたは歓声、魔法のように

iframe { 
    border: 0; 
    display: block; 
    height: 97%; 
    width: 100%; 
} 
#player { 
    background-color: black; 
    bottom: 0; 
    color: white; 
    left: 0; 
    position: fixed; 
    height: 3%; 
    width: 100%; 
} 

http://jsfiddle.net/vhLeE/3/