具有css固定位置的iframe:可能吗?

Eri*_*ric 7 html iframe

我想在外部网站上添加一些广告,为此,我使用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>
Run Code Online (Sandbox Code Playgroud)

iframe位于正确的位置,但'bottom:0'不起作用:为什么?我希望iFrame跟随窗口大小调整:如何继续?

Kel*_*sen 20

我知道这有点晚了,但我通过谷歌发现了这个问题,无疑其他人也会这样.如果你想以固定div的位置来固定iframe的位置,你可以将它包装在一个固定的位置div中并使其大小为100%.

此代码在整个页面上拉伸iframe,为顶部的菜单留出空间.

CSS:

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

#idiv {
    position: fixed;
    top: 41px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id='idiv'>
     <iframe id="iframe_main"> 
     </iframe>
</div>
Run Code Online (Sandbox Code Playgroud)


Eri*_*ric 0

做就是了 :

<!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>
Run Code Online (Sandbox Code Playgroud)