Html CSS 和 iframe。如何在不滚动的情况下在 Iframe 中查看完整页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4562289/
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
CSS and Iframe. How to view the full page without scroll in the Iframe?
提问by André
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
我正在尝试使用 CSS 和 Iframe 开发布局。如何在不滚动的情况下在 iframe 中显示完整页面？iframe 是否适合显示完整的网页？
Here is the code:
这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
如果您测试代码，您会看到 CSS 在页面内创建了一个滚动。我怎样才能摆脱这个滚动并显示所有页面？
Best Regards,
此致，
UPDATE:
更新：
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
我快到了。我只需要向上/向下滚动越过页眉，就像越过页脚一样。那可能吗？请看代码。只需复制/粘贴它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
关于如何实现这一目标的任何线索？
Best Regards,
此致，
回答by James South
You'll have to set the height of the iframe to match the height of the page you are looking at.
您必须设置 iframe 的高度以匹配您正在查看的页面的高度。
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
如果页面在同一个域内，您可以使用 javascript 动态调整框架的大小以匹配您正在查看的页面的正文大小。有一些 jQuery 插件可以做到这一点。
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
如果是外部域，则无法执行此操作，因此您只需将 iframe 的高度属性设置为匹配即可。
回答by tcooc
If you want to get rid of the scrollbar on the main window, add an overflowstyle:
如果你想去掉主窗口上的滚动条，添加一个overflow样式：
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
回答by Eric Leroy
You can do this with javascript:
你可以用 javascript 做到这一点：
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length: resizeFrame();
然后在加载时调用此函数，并在任何会更改表单长度的隐藏/取消隐藏操作之后调用此函数：resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
如果您在 iframe 内的顶级 html 标签上有边距/填充，您可能需要像这样将 px 添加到 height() / width() ：
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
回答by Bazzz
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
iframe 无法相对于它显示的页面调整大小。您需要使用 javascript 调整它的大小，这意味着您事先知道页面的大小。如果您只是在显示您的另一个页面的内容之后，确实可以看看 ajax。
A very simple example can be found here: http://aleembawany.com/2005/09/01/ajax-instant-tutorial
一个非常简单的例子可以在这里找到：http: //aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
请注意，由于浏览器的安全设置，在跨域上下文中使用 ajax 加载页面可能无法正常工作。
