具有 css 固定位置的 iframe：可能吗？答案

【问题标题】：iframe with a css fixed position : possible?具有 css 固定位置的 iframe：可能吗？
【发布时间】：2011-05-10 21:44:20
【问题描述】：

我想在外部网站上添加一些广告，为此，我使用 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>

iframe 位于正确的位置，但“底部：0”不起作用：为什么？我希望 iFrame 跟随窗口大小调整：如何进行？

【问题讨论】：

标签： html iframe

【解决方案1】：

只要做：

<!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>

【讨论】：

这几乎可以工作，但 iframe 内容的最底部将低于容器的底部，因为 top: 50px 和 height: 100% 的组合

【解决方案2】：

尝试添加样式标签并设置 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】：

我知道这有点晚了，但我通过谷歌找到了这个问题，毫无疑问其他人也会。如果您想像固定 div 的位置一样固定 iframe 的位置，可以将其包装在固定位置的 div 中并使其大小为 100%。

此代码将 iframe 延伸到整个页面，为顶部的菜单留出空间。

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>

【讨论】：

谢谢。但是，为什么 iframe 不像其他元素那样工作？

【解决方案4】：

为什么不删除 CSS 属性“top:50px”？那么“底部”就会很好地工作。

【讨论】：