Iframe i Firefox/IE bug

Question

Próbuję dla zawartości i używam position: fixed; dla paska odtwarzacza muzyki, aby zachować go na dole strony.

Demo: 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%; 
} 

Niestety to nie działa dobrze dla IE lub Firefix 9, to po prostu pokazuje zawartość w małym okno wysokości: http://cl.ly/0y0T2I1R042c3G002H3y

jak mogę to naprawić?

Answer 1

Już wcześniej widziałem podobny problem z rzeczami, nad którymi pracowałem, i na szczęście obejście jest naprawdę proste - IE i Firefox wymagają po prostu ustawienia html również na 100%. Dlatego zaktualizuj pierwszy element swojego stylu:

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

To powinno załatwić sprawę.

Answer 2

Należy również rozważyć podzielenie wysokości w procentach na iframe i div. Jeśli podasz 100% dla iframe, div może ukryć paski przewijania.

może go zmienić na

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/