Geek Answers Handbook

Iframe error and Firefox / IE

I try <iframe>for the content and use position: fixed;the music player for the player panel to save 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%; 
}

Unfortunately, this doesn’t work very well for IE or Firefix 9, it just displays the content in a small window: http://cl.ly/0y0T2I1R042c3G002H3y

how can i fix this?

+5
source share
2 answers

Earlier, I saw a similar problem with what I was working on, and, fortunately, the workaround is very simple - IE and Firefox just require that the html height be set to 100%. So, update the first element of your style:

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

That should do the trick.

+12

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/

0

More articles:


All Articles