Ошибка 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 высот в процентах. Если вы укажете 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/