iframe with a css fixed position : possible?

问题

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

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

The iframe is at the right position, but the 'bottom: 0' does not work : why ? I would like the iFrame to follow the window resizing : how to proceed ?

回答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>

回答2:

Try adding a style tag and styling the iFrame.

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

回答3:

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

回答4:

Just do :

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

来源：https://stackoverflow.com/questions/4195971/iframe-with-a-css-fixed-position-possible

标签

html

iframe