Javascript 如何让 iframe 填充整个页面 100% 和 top:4px？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12123947/
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
how to get iframe to fill entire page 100% and top:4px?
提问by The Antarctican
I've been coming here for a while, and only asked 1 question before. And I have designed many sites. But the only thing I do not fully get is 'iFrames'. They mess with my head a tad bit.
我来这里已经有一段时间了，之前只问过 1 个问题。我设计了很多网站。但我唯一没有完全理解的是“iFrames”。他们有点搞砸了我的头。
.:What i'm trying to achieve:.
.:我想要实现的目标:.
note: I do not have ownership of the origin of the iFrames domain... It should be irrelevant since you are simply taking one page, and showing it on another. Their External Styling still shows their page how it should. I know this because i've done it.
注意：我对 iFrames 域的来源没有所有权...这应该无关紧要，因为您只是在取一页，然后在另一页上显示它。他们的外部样式仍然显示他们的页面应该如何。我知道这一点，因为我已经做到了。
1) I need to know how to get the iFrame to show on my site as a FULL PAGE. I know there are ALOT of topics on here about iFrames, but 1) they are outdated. 2) they do not apply to me/my site. I've tried everything, and yet it all seems futile.
1) 我需要知道如何让 iFrame 在我的网站上显示为全页。我知道这里有很多关于 iFrame 的主题，但是 1) 它们已经过时了。2）它们不适用于我/我的网站。我已经尝试了一切，但似乎都是徒劳的。
.:Example:.
。：例子：。
When user(s) go to http://www.example.com/news.php, the page should load the content from another news site. i.e cnn, wn, cbs...
当用户访问http://www.example.com/news.php 时，页面应该从另一个新闻站点加载内容。即cnn、wn、cbs...
I have figured this out before, so please no1 tell me all that rubble about not having ownership of contents, then I cannot reach my goal.
我之前已经想通了，所以请不要告诉我所有关于没有内容所有权的瓦砾，然后我就无法达到我的目标。
I don't remember how I wrote it, but I know there was NO CSS styling whatsoever. It was something VERY similar to:
我不记得我是怎么写的，但我知道没有任何 CSS 样式。这与以下内容非常相似：
<body style="scrolling:no;>
<iframe src='http://www.example.com'
style='position:absolute; top:4px; left:0px; width:100%; height:100%;
z-index:999' onload='sendParams();' frameborder='no' scrolling='auto'>
</iframe>
</body>
What I am not getting is: No matter what style I use to customize the iFrame, it seems to be held within a box about the size= 867x155.
I even tried to put the iFrame itself within a DIV, and DIVset to: W- 100%H- 100%.
我没有得到的是：无论我使用什么样式来自定义 iFrame，它似乎都保存在一个关于size= 867x155. 我什至试图将 iFrame 本身放在一个DIV, 并DIV设置为： W- 100%H- 100%。
when I tried the CSS approach, the marginheight/width was ignored. Also, a different body style of margin="0", was futile; yet again.
当我尝试使用 CSS 方法时，边距高度/宽度被忽略了。而且，不同的体型margin="0"，是徒劳的；再次。
回答by Cynthia
Have a look: http://jsfiddle.net/cgXcR/
看看：http: //jsfiddle.net/cgXcR/
The HTML:
HTML：
<iframe src="http://www.cnn.com" height="100%"></iframe>?
The CSS:
CSS：
body, html { width:100% ;
height:100% ;
overflow:hidden ;
}
iframe { width:100% ;
height:100% ;
border:none ;
}
回答by The Antarctican
Ok, well I would like to thank Cynthia for her help.
好的，我要感谢 Cynthia 的帮助。
But if anyone is looking for a simplistic answer that ACTUALLY works, then check this out:
但是，如果有人正在寻找实际有效的简单答案，请查看以下内容：
Like the ORIGINAL inquiry: FULL iFrame
喜欢原始查询：FULL iFrame
A resolve using CSS
使用 CSS 解决
<blah>
<head>
<style type="text/css">
body {scrolling:no;
}
iframe {position:absolute;
z-index:1;
top:0px;
left:0px;
}
</style>
</head>
<body>
<iframe src="http://www.wn.com" height="100%" width="100%" frameborder="0"></iframe>
</body>
Notice the positioning& z-index
注意positioning&z-index
*Note: This can be wrote through MARK-UP ONLY. You do not have to use CSS, but it makes more sense to do this because not only are you trying to have everything show correctly on yoru website; by using CSS to customize your iFrame, you open more windows for each individual frame within your webpage. If you are like me, and only using ONE iFrame, then you should simply use MARK-UP. But, if you have more than 1 [or 1 frame has many within], you should use CSS to specifically IDeach frame. *
*注意：这只能通过 MARK-UP 写入。您不必使用 CSS，但这样做更有意义，因为您不仅要尝试在 yoru 网站上正确显示所有内容；通过使用 CSS 自定义 iFrame，您可以为网页中的每个单独框架打开更多窗口。如果你像我一样，只使用一个 iFrame，那么你应该简单地使用 MARK-UP。但是，如果您有 1 个以上 [或 1 个框架内有多个]，您应该使用 CSS 专门针对ID每个框架。*
Also, if anyone is wondering how to use MARK-UP only, simply swap what's in the CSS, and put within the <iframe></iframe>but use single quotes
另外，如果有人想知道如何仅使用 MARK-UP，只需交换 CSS 中的内容，然后将其放入<iframe></iframe>但使用单引号
The Antarctican
The Antarctican
