CODEWITHSUNDEEP
iframe
Hellnar
Hellnar

Reputation: 64883

Iframe and Firefox/IE bug

I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.

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

Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y

how can I fix this ?

Upvotes: 5

Views: 1299

Answers (2)

Prashant Bhate
Prashant Bhate

Reputation: 11087

You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.

you may change it to

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/

Upvotes: 0

Rob Wilkins
Rob Wilkins

Reputation: 1650

I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:

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

That should do the trick.

Upvotes: 12

Related Questions