所有浏览器都支持 iframe height=100% 吗？
我使用 doctype 作为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的 iframe 代码中，如果我说：
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它实际上会占用剩余页面的高度（因为顶部有另一个固定高度为 50px 的框架）所有主要浏览器（IE/Firefox/Safari）都支持吗？
另外关于滚动条，即使我说scrolling="no"，我可以在 Firefox 中看到禁用的滚动条...如何完全隐藏滚动条并自动设置 iframe 高度？
您可以使用框架集作为先前的答案状态，但如果您坚持使用 iFrames，则以下 2 个示例应该有效：
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
替代：
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
要使用 2 个选项隐藏滚动，如上所示：
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
使用第二个示例进行破解：
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
为了隐藏 iFrame 的滚动条，父级被设置overflow: hidden为隐藏滚动条，并且 iFrame 被设置为 150% 的宽度和高度，这迫使滚动条在页面之外，并且由于主体没有滚动条人们可能不希望 iframe 超出页面的边界。这会隐藏全宽 iFrame 的滚动条！
iframe：在支持的浏览器中，您可以使用视口百分比长度，例如height: 100vh.
其中100vh表示视口的高度，同样100vw表示宽度。
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>这种方法相当直接。只需设置的定位fixed元素，并添加height/width的100%。
iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}<iframe></iframe>对于这最后的方法，只设置height了的body/ html/iframe元素100%。
html, body {
height: 100%;
margin: 0; /* Reset default margin on the body element */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
width: 100%;
height: 100%;
}<iframe></iframe>1. 将您的 DOCTYPE 更改为不那么严格的内容。不要使用 XHTML；这很愚蠢。只需使用 HTML 5 doctype 就可以了：
<!doctype html>
2. 您可能需要确保（取决于浏览器）iframe 的父级具有高度。和它的父母。和它的父母。等等：
html, body { height: 100%; }
我遇到了同样的问题，我正在将一个 iframe 拉入一个 div。试试这个：
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为 100vh，代表视口高度。此外，宽度可以设置为 100vw，但如果源文件具有响应性（您的框架将变得非常宽），您可能会遇到问题。
这对我来说非常有效（仅当 iframe 内容来自同一域时）：
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>