我想设计一个包含横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以在不编写Javascript代码的情况下完成它，仅使用CSS？
我尝试在iframe上设置height:100%，结果非常接近但是iframe尝试填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。这不完美。
更新备注：请原谅我没有好好描述问题，我尝试了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>
任何想法都表示赞赏。
答案 0 :(得分：190)
答案 1 :(得分：65)
我们使用JavaScript来解决这个问题;这是来源。
var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
iframe.attachEvent("onload", resizeIframe);
} else {
iframe.onload=resizeIframe;
}
window.onresize = resizeIframe;
注意：ifm是iframe ID
pageY()由John Resig（jQuery的作者）
答案 2 :(得分：45)
另一种方法是在父节点上使用position: fixed;
如果我没有弄错的话，position: fixed;会将元素绑定到视口，因此，一旦您为此节点提供width: 100%;和height: 100%;属性，它将跨越整个屏幕。从现在开始，您可以在其中放置<iframe>标记，并使用简单的width: 100%; height: 100%; CSS指令跨越剩余空间（宽度和高度）。
示例代码
body {
margin: 0px;
padding: 0px;
}
/* iframe's parent node */
div#root {
position: fixed;
width: 100%;
height: 100%;
}
/* iframe itself */
div#root > iframe {
display: block;
width: 100%;
height: 100%;
border: none;
} <html>
<head>
<title>iframe Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="root">
<iframe src="http://stackoverflow.com/">
Your browser does not support inline frames.
</iframe>
</div>
</body>
</html>
答案 3 :(得分：37)
您可以使用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>
答案 4 :(得分：33)
calc()。表达式calc(100vh - 30px)表示剩余高度。其中100vh是浏览器的高度，calc()的用法有效地取代了另一个元素的高度。
body {
margin: 0;
}
.banner {
background: #f00;
height: 30px;
}
iframe {
display: block;
background: #000;
border: none;
height: calc(100vh - 30px);
width: 100%;
}<div class="banner"></div>
<iframe></iframe>
将公共父元素的display与flex一起设置为flex-direction: column（假设您希望元素叠加在一起）。然后在子flex-grow: 1元素上设置iframe，以便填充剩余空间。
body {
margin: 0;
}
.parent {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent .banner {
background: #f00;
width: 100%;
height: 30px;
}
.parent iframe {
background: #000;
border: none;
flex-grow: 1;
}<div class="parent">
<div class="banner"></div>
<iframe></iframe>
</div>
由于这种方法有less support 1 ，我建议采用上述方法。
1 虽然它似乎在Chrome / FF中有效，但它在IE中不起作用（第一种方法适用于所有当前浏览器）。
答案 5 :(得分：17)
也许这已经得到了解答（以上几个答案是“正确”的方法），但我想我也只是添加我的解决方案。
我们的iFrame被加载到一个div中，因此我需要一些其他东西然后window.height。看到我们的项目已经在很大程度上依赖于jQuery，我发现这是最优雅的解决方案：
$("iframe").height($("#middle").height());
当然“#middle”是div的id。您需要做的唯一额外事情是，只要用户调整窗口大小，就会调用此大小更改。
$(window).resize(function() {
$("iframe").height($("#middle").height());
});
答案 6 :(得分：7)
这就是我的所作所为。我遇到了同样的问题，最终在网上搜索了几个小时的资源。
<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列的表格的中间单元格内。
答案 7 :(得分：6)
MichAdel代码对我有用，但我做了一些小修改才能使它正常工作。
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
答案 8 :(得分：4)
尝试以下方法：
<iframe name="" src="" width="100%" style="height: 100em"/>
它对我有用
答案 9 :(得分：3)
是的，你正在展示一个相对于其容器高度为100％的iframe：身体。
试试这个：
<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的高度更改为您想要的高度。
答案 10 :(得分：3)
您可以使用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>
答案 11 :(得分：2)
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>
答案 12 :(得分：2)
我使用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，因为这似乎不适用于小提琴）
答案 13 :(得分：1)
在尝试了css路线一段时间之后，我最终在jQuery中编写了一些相当基础的东西，为我完成了这项工作：
function iframeHeight() {
var newHeight = $j(window).height();
var buffer = 180; // space required for any other elements on the page
var newIframeHeight = newHeight - buffer;
$j('iframe').css('height',newIframeHeight); //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}
// When DOM ready
$(function() {
window.onresize = iframeHeight;
}
在IE8，Chrome，Firefox 3.6中测试
答案 14 :(得分：1)
我认为你在这里有一个概念问题。要说“我尝试设置高度：100％在iframe上，结果非常接近，但iframe试图填满整个页面”，好吧，当“100％”不等于“整体“？
你已经要求iframe填充其容器的整个高度（这是正文）但不幸的是它在＆lt; div＆gt;中有一个块级兄弟。在你上面要求它是30px大。因此，现在要求父容器总数大小为100％+ 30px＆gt; 100％！因此滚动条。
我认为你意味着是你希望iframe消耗剩下的，就像帧和表格单元格一样，即height =“*”。 IIRC这不存在。
不幸的是，据我所知，没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你减少了两个选项：
绝对定位你的div，哪个 将它带出容器所以 单独的iframe将消耗它 容器高度。这让你失望 各种其他问题 虽然，但也许是因为你是什么 做不透明或对齐会 确定。
或者你需要指定一个 div的％高度并减少 那么多iframe的高度。 如果真的是绝对高度 那个重要的你需要申请 那个div的子元素 代替。
答案 15 :(得分：1)
它将使用下面提到的代码
<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
答案 16 :(得分：1)
@MichAdel的类似答案，但我使用的是JQuery，更优雅。
<script type="text/javascript">
$(document).ready(function() {
var $iframe = $('#iframe_id')[0];
// Calculate the total offset top of given jquery element
function totalOffsetTop($elem) {
return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
}
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= totalOffsetTop($iframe);
$iframe.height = Math.max(0, height) + 'px';
}
$iframe.onload = resizeIframe();
window.onresize = resizeIframe;
});
</script>
iframe_id是iframe代码的ID
答案 17 :(得分：0)
或者你可以去老派并使用frameset或许：
<frameset rows="30,*">
<frame src="banner.swf"/>
<frame src="inner.html" />
</frameset>
答案 18 :(得分：0)
您可以通过测量加载/调整大小事件的正文大小并将高度设置为（全高 - 横幅高度）来完成此操作。
请注意，目前在IE8 Beta2中，您无法执行此操作，因为该事件目前在IE8 Beta2中已被破坏。
答案 19 :(得分：0)
虽然我同意JS似乎是一个更好的选择，但我有一个只有CSS工作的解决方案。它的缺点是，如果你必须经常向iframe html文档添加内容，你必须适应一个百分比的时间。
解决方案：
尝试未指定任何高度以用于您的html文档，
html, body, section, main-div {}
然后只编码：
#main-div {height:100%;}
#iframe {height:300%;}
注意：div应该是你的主要部分。
这应该相对有效。 iframe确实计算出300％的可见窗口高度。如果第二个文档（在iframe中）的html内容的高度小于浏览器高度的3倍，则可以正常工作。如果您不需要经常向该文档添加内容，这是一个永久的解决方案，您可以根据您的内容高度找到您自己的％。
这是有效的，因为它阻止了第二个html文档（嵌入的一个）继承父高清文档的高度。它会阻止它，因为我们没有为它们指定高度。当我们给孩子一个％时，它会查找它的父级，如果没有，它会获取其内容高度。并且只有当其他容器没有达到高度时，我才会尝试。
答案 20 :(得分：0)
“无缝”属性是旨在解决此问题的新标准：
http://www.w3schools.com/tags/att_iframe_seamless.asp
分配此属性时，它将删除边框和滚动条，并将iframe的大小调整为其内容大小。 虽然它仅在Chrome和最新的Safari
中受支持此处更多内容： HTML5 iFrame Seamless Attribute
答案 21 :(得分：0)
一个简单的jQuery解决方案
在iframed页面内的脚本中使用它
$(function(){
if(window != top){
var autoIframeHeight = function(){
var url = location.href;
$(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
}
$(window).on('resize',autoIframeHeight);
autoIframeHeight();
}
}
答案 22 :(得分：0)
你不能将iframe高度设置为％，因为你的父体高度不是100％，所以将父高度设为100％，然后应用iframe height 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>
答案 23 :(得分：0)
如果您有权访问将要加载的iframe的内容，您可以告诉其父级在调整大小时调整大小。
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
如果您在网页上有多个iframe，则可能需要使用ID或其他智能方法来增强.find（＆＃34; iframe＆＃34;），以便您选择正确的。
答案 24 :(得分：0)
我认为使用css位置实现此方案的最佳方法。设置相对于父div的位置和位置：绝对值到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()
答案 25 :(得分：0)
为什么不这样做（对身体填充/边距进行微调）
<script>
var oF = document.getElementById("iframe1");
oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
答案 26 :(得分：0)
使用vh
<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>