Iframe và Firefox/IE bug

Question

Tôi thử cho nội dung và sử dụng position: fixed; cho thanh trình phát nhạc để giữ nó ở cuối trang.

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

Đáng buồn là điều này không làm việc tốt cho trình duyệt IE hoặc Firefix 9, nó chỉ đơn giản thể hiện nội dung trong một nhỏ cửa sổ chiều cao: http://cl.ly/0y0T2I1R042c3G002H3y

làm cách nào để khắc phục sự cố này?

Answer 1

Tôi đã nhìn thấy một vấn đề tương tự trước đây với những điều tôi đã làm việc, và may mắn thay giải pháp thực sự đơn giản - IE và Firefox chỉ cần chiều cao html được đặt thành 100%. Vì vậy, hãy cập nhật phần tử đầu tiên của phong cách của bạn thành:

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

Điều đó sẽ làm điều đó.

Answer 2

Bạn cũng nên xem xét chia tỷ lệ iframe và div theo tỷ lệ phần trăm. Nếu bạn chỉ định 100% cho iframe, div có thể ẩn thanh cuộn.

bạn có thể thay đổi nó để

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/