我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否有可能不编写JavaScript代码，只使用CSS来完成?
我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。它并不完美。
我尝试了CSS的margin, padding属性在DIV上成功地占据了网页的整个剩余高度，但这个技巧在iframe上不起作用。
<身体> < div风格= "宽度:100%;高度:30 px;background - color: # cccccc;" > < / div >旗帜 <iframe src="http: //www.google.com.tw" style="width:100%;高度:100%;" > < / iframe > 身体< / >
当前回答
如果你可以访问将要加载的iframe的内容，你可以告诉它的父元素在它调整大小的时候调整大小。
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
如果页面上有多个iframe，您可能需要使用id或其他聪明的方法来增强.find(“iframe”)，以便选择正确的iframe。
其他回答
“无缝”属性是一个新的标准，旨在解决这个问题:
http://www.w3schools.com/tags/att_iframe_seamless.asp
当分配此属性时，它将删除边框和滚动条，并将iframe大小设置为其内容大小。 不过它只支持Chrome和最新的Safari浏览器
更多信息请点击这里: HTML5 iFrame无缝属性
或者你也可以使用老派的框架集:
<frameset rows="30,*">
<frame src="banner.swf"/>
<frame src="inner.html" />
</frameset>
我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面”，好吧，什么时候“100%”不等于“整个”?
你已经要求iframe填充它的容器(也就是body)的整个高度，但不幸的是，它在<div>上面有一个块级别的兄弟，你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。
我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西，即height="*"。IIRC，这个不存在。
不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你只有两个选择:
绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然，但也许是为了你 做不透明或对齐将 好的。 或者，您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要，你需要申请 这是div的子元素 代替。
我使用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，因为这似乎不工作在小提琴)
https://jsfiddle.net/yufceynk/1/
以下是一些现代的方法:
Approach 1 - Combination of viewport relative units / calc(). The expression calc(100vh - 30px) represents the remaining height. Where 100vh is the height of the browser and the usage of calc() effectively displaces the height of the other element. Example Here 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> Support for calc() here; support for viewport relative units here.
Approach 2 - Flexbox approach Example Here Set the display of the common parent element to flex, along with flex-direction: column (assuming you want the elements to stack on top of each other). Then set flex-grow: 1 on the child iframe element in order for it to fill the remaining space. 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> Since this approach has less support1, I'd suggest going with the aforementioned approach.
1虽然它似乎在Chrome/FF中工作，但它在IE中不起作用(第一种方法在所有当前的浏览器中都有效)。
