Question

我尝试<iframe>获取内容，并使用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高度除以百分比。如果您为100%指定iframe，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/

iframe和Firefox / IE的bug

2 个答案: