Iframe和Firefox/IE bug

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/