Error iframe y Firefox/IE

Question

Intento para el contenido y uso position: fixed; para una barra de reproducción de reproductor de música para mantenerlo en la parte inferior de la página.

Demostración: 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%; 
} 

Lamentablemente esto no funciona bien para IE o firefix 9, sino que simplemente muestra el contenido en una pequeña ventana de altura: http://cl.ly/0y0T2I1R042c3G002H3y

¿cómo puedo arreglar esto?

Answer 1

He visto un problema similar antes con las cosas en las que he trabajado, y afortunadamente la solución es muy simple: IE y Firefox solo necesitan que la altura del html también se establezca en el 100%. Así que actualice el primer elemento de su estilo para que sea:

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

Eso debería hacer el truco.

Answer 2

También debería considerar dividir iframe y div alturas en porcentajes. Si especifica 100% para iframe, div puede ocultar las barras de desplazamiento.

puede cambiarlo a

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/