使用 iframe 完全嵌入页面，没有边框，没有边框曾经存在的空白答案

【问题标题】：Embed a page completely using iframe, no border, no whitespace where the border once was使用 iframe 完全嵌入页面，没有边框，没有边框曾经存在的空白
【发布时间】：2014-12-07 07:29:55
【问题描述】：

我有以下代码

<html>
<body>
<iframe src="http://anothersite.com" style="width:100%; height:100%;  overflow-y: scroll; overflow-x: hidden;"   marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" seamless="seamless" ></iframe>
</body>
</html>

它有一个 iframe，我想在其中显示另一个网站，就像它是网站上的一个页面一样。但是，当移除边框并且滚动条仍然存在时，仍然存在一些空白区域，但它只是仍然存在。我希望它不可见但仍然可以滚动，并且边框空间消失了。请任何帮助将不胜感激。在我使用的浏览器（Chrome）上，我还没有找到适合我的直接答案。谢谢你。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

页面总是有一个默认的边距/内边距，这会因浏览器和浏览器使用的模式而异。

添加一个文档类型，这样页面就不会以怪异模式呈现（因为这会降低它的可预测性）。添加一个样式表，从 body 元素中删除边距和填充。

<!DOCTYPE html>
<html>
<head>
<title>Page name</title>
<style>
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
</style>
</head>
<body>
<iframe src="http://anothersite.com" style="width:100%; height:100%;  overflow-y: scroll; overflow-x: hidden;"   marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" seamless="seamless" ></iframe>
</body>
</html>

【讨论】：

谢谢。但是现在高度有问题。无论出于何种原因，它大约是 200 像素。滚动条也在侧面。你会碰巧知道如何解决这些问题吗？
@user1917363：尝试设置html和body元素的高度，设置overflow:hidden以摆脱滚动条。见上面的代码。
谢谢。这帮助我找到了适用于 Firefox、Internet Explorer、Chrome 和 Opera 的完整解决方案。我为任何人的未来使用它的最终代码 tyle="height:100%">