Html 带有 css 固定位置的 iframe：可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4195971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframe with a css fixed position : possible?
提问by Eric
I would like to add some ads on an external website, to do so, I use 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>
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 ?
iframe 位于正确的位置，但“底部：0”不起作用：为什么？我希望 iFrame 跟随窗口大小调整：如何进行？
回答by Kelly Larsen
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%.
我知道这有点晚了，但我通过谷歌发现了这个问题，毫无疑问其他人也会。如果您想以与固定 div 位置相同的方式固定 iframe 的位置，则可以将其包裹在固定位置 div 中并使其大小为 100%。
This code stretches the iframe across the entire page leaving space for a menu at the top.
此代码在整个页面上拉伸 iframe，为顶部的菜单留出空间。
CSS:
CSS：
#iframe_main {
height: 100%;
width: 100%;
}
#idiv {
position: fixed;
top: 41px;
left: 0px;
right: 0px;
bottom: 0px;
}
HTML:
HTML：
<div id='idiv'>
<iframe id="iframe_main">
</iframe>
</div>
回答by James Charless Dickinson
Try adding a style tag and styling the 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">
<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>
回答by Eric
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>
回答by javyhang
why don't you remove the CSS attribute "top:50px"? Then the "bottom" would work well.
为什么不删除 CSS 属性“top:50px”？那么“底部”会很好地工作。
