Iframe и Firefox / IE ошибка

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/