Skip to content Skip to sidebar Skip to footer
Home / Html / Iframe

Iframe With A Css Fixed Position : Possible?

Post a Comment
I would like to add some ads on an external website, to do so, I use iframe :

Solution 1:

I know this is a little late, but I found this question via google and doubtless others will too. If you want to fix the position of an iframe the same way you fix the position of a div, you can wrap it in a fixed position div and make it's size 100%.

This code stretches the iframe across the entire page leaving space for a menu at the top.

CSS:

#iframe_main {
    height: 100%;
    width: 100%;
}

#idiv {
    position: fixed;
    top: 41px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

HTML:

<div id='idiv'>
     <iframe id="iframe_main"> 
     </iframe>
</div>

Solution 2:

Try adding a style tag and styling the iFrame.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><styletype='text/css'>body { background-color: #DDD; margin: none; }
     iframe { position: fixed; top: #px; left: #px; }
</style><body><center>My ad</center><iframesrc="http://www.google.com"border="0"><p>Your browser does not support iframes.</p></iframe></body></html>

Solution 3:

why don't you remove the CSS attribute "top:50px"? Then the "bottom" would work well.

Solution 4:

Just do :

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><bodystyle="background:#ddd"><center>My ad</center><divstyle="position:fixed; top:50px; left:0; width: 100%; bottom: 0; border: 0 "><iframesrc="http://www.google.com"style="width: 100%; height: 100%; border: 0"><p>Your browser does not support iframes.</p></iframe></div></body></html>

Post a Comment for "Iframe With A Css Fixed Position : Possible?"