English 我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？
我尝试height:100%在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括30pxbanner div元素的高度，因此我得到了不必要的垂直滚动条。这不是完美的。
更新说明：对不起，我没有很好地描述问题，我尝试使用CSS边距，DIV上的padding属性成功占据了整个页面的刷新高度，但该技巧在iframe上不起作用。
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>任何想法表示赞赏。
我认为使用CSS位置实现此方案的最佳方法。设置相对于您的父div的位置和position：absolute到您的iframe。
.container{
width:100%;
position:relative;
height:500px;
}
iframe{
position:absolute;
width:100%;
height:100%;
}<div class="container">
<iframe src="http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</div>对于其他填充和边距问题，现在css3 calc（）非常先进，并且几乎也与所有浏览器兼容。
检查calc（）
您无法以％设置iframe的高度，因为您的父代身体的身高不是100％，因此请将父代的高度设为100％，然后将iframe的高度设为100％
For eg.
<html>
<head>
<style>
html,body{height:100%}
</style>
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
如果您有权访问将要加载的iframe的内容，则可以在调整大小时告诉其父项重新调整大小。
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
如果页面上有多个iframe，则可能需要使用id或其他巧妙的方法来增强.find（“ iframe”），以便选择正确的iframe。
虽然我同意JS似乎是一个更好的选择，但我有一个仅CSS可用的解决方案。缺点是，如果您必须经常向iframe html文档中添加内容，则必须调整一个百分比的谷值时间。
解：
尝试不要同时为您的html文档指定任何高度，
html, body, section, main-div {}
然后只编码：
#main-div {height:100%;}
#iframe {height:300%;}
注意：div应该是您的主要部分。
这应该相对有效。iframe确实会准确计算可见窗口高度的300％。如果第二个文档（在iframe中）的html内容的高度小于浏览器高度的3倍，则可以正常工作。如果您不需要经常向该文档添加内容，这是一个永久性的解决方案，您可以根据自己的内容高度找到自己所需的％。
之所以有效，是因为它阻止了第二个html文档（一个被嵌入）从父html文档继承其高度。它可以防止出现这种情况，因为我们没有为它们两个都指定高度。当我们给孩子一个％的时候，它会寻找它的父母，如果不是，它将取其内容高度。而且只有在其他容器没有指定高度的情况下，我才尝试这样做。
或者您可以去老学校并使用框架集：
<frameset rows="30,*">
<frame src="banner.swf"/>
<frame src="inner.html" />
</frameset>
“ Seamless ”属性是旨在解决此问题的新标准：
http://www.w3schools.com/tags/att_iframe_seamless.asp
分配此属性时，它将删除边框和滚动条，并将iframe调整为其内容大小。尽管仅Chrome和最新版Safari支持
此处的更多信息： HTML5 iFrame Seamless属性
您可以通过在加载/调整大小事件中测量主体大小并将高度设置为（全高-标语高度）来做到这一点。
请注意，当前在IE8 Beta2中您无法按此大小执行此操作，因为该事件当前在IE8 Beta2中已中断。
它将与下面提到的代码一起使用
<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
我认为您在这里有一个概念上的问题。要说“我尝试在iframe上设置height：100％，结果非常接近，但iframe试图填满整个页面”，那么，何时“ 100％”不等于“整个”？
您已要求iframe填充其容器（即主体）的整个高度，但不幸的是，它在<div>中具有块级同级，要求将其设为30px大。因此，现在要求将父容器的总尺寸设置为100％+ 30px> 100％！因此，滚动条。
我想您的意思是，您希望iframe 像框架和表格单元格一样使用剩余的东西，即height =“ *”。IIRC这不存在。
不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，因此我认为您只能选择两种：
绝对定位div，将其从容器中取出，这样仅iframe便会消耗其容器高度。尽管这会给您带来其他各种问题，但是对于您正在做的事情来说，不透明或对齐可能没问题。
另外，您需要为div指定高度百分比，并将iframe的高度减少那么多。如果绝对高度真的很重要，则需要将其应用于div的子元素。
您可以使用html / css这样进行操作：
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
我使用display：table来解决类似的问题。它几乎适用于这一点，留下一个小的垂直滚动条。如果您尝试使用除iframe之外的其他内容填充该灵活列，那么它会很好地工作（而不是
采取以下HTML
<body>
<div class="outer">
<div class="banner">Banner</div>
<div class="iframe-container">
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
</div>
</div>
</body>
将外部div更改为使用display：table并确保已设置宽度和高度。
.outer {
display: table;
height: 100%;
width: 100%;
}
将横幅广告设置为表格行，并将其高度设置为您的首选项：
.banner {
display: table-row;
height: 30px;
background: #eee;
}
在iframe（或所需的任何内容）周围添加一个额外的div，并将其设置为高度设置为100％的表格行（如果要嵌入iframe来填充高度，则设置其高度至关重要）
.iframe-container {
display: table-row;
height: 100%;
}
下面是一个jsfiddle，显示了它的工作状态（没有iframe，因为在小提琴中似乎不起作用）
HTML5的新功能：使用calc（高度）
<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
没错，您所展示的iframe相对于其容器（主体）的高度为100％。
尝试这个：
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<div style="width:100%; height:90%; background-color:transparent;">
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
</iframe>
</div>
</body>
当然，将第二个div的高度更改为所需的高度。
尝试以下方法：
<iframe name="" src="" width="100%" style="height: 100em"/>
它对我有用
这就是我所做的。我遇到了同样的问题，最终在网上搜索了几个小时的资源。
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { position:fixed; display:block; width:100%; border:none; }
</style>
我将此添加到头部。
请注意，我的iframe位于具有3行1列的表格的中间单元内。
您可以使用它来做DOCTYPE，但是必须使用table。看一下这个：
<!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" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
<tr><td class="header"><div><h1>Header</h1></div></td></tr>
<tr><td class="content">
<iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
也许已经回答了（上面的一些回答是“正确”的方法），但是我想我也应该添加解决方案。
我们的iFrame是在div中加载的，因此我需要window.height之后的其他内容。看到我们的项目已经高度依赖jQuery，我发现这是最优雅的解决方案：
$("iframe").height($("#middle").height());
当然，“＃middle”是div的ID。您唯一需要做的就是在用户调整窗口大小时调用此大小更改。
$(window).resize(function() {
$("iframe").height($("#middle").height());
});
为什么不这样做（对主体填充/边距进行细微调整）