使iframe适合容器剩余高度的100％
我想devise一个横幅和一个iframe的网页。 我希望iframe可以填充所有剩余的页面高度，并在浏览器resize时自动resize。 是否有可能完成而不写Javascript代码，只有CSS？
我试图在iframe上设置height:100% ，结果非常接近，但iframe试图填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。 这并不完美。
更新logging ：不好意思，我不是很好地描述了这个问题，我尝试了CSS边距，DIV上的填充属性，成功地占据了网页的整个提醒高度，但是这个技巧在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>
任何想法是赞赏。
诀窍是了解什么是100％的。 阅读CSS规范可以帮助你。
长话短说 – “含有块”这样的东西 – 这不是父元素所必需的。 简单地说，它是具有位置的层次结构中的第一个元素：相对或位置：绝对。 如果没有别的东西，或者身体要素本身。 所以，当你说“宽度：100％”，它会检查“包含块”的宽度，并将元素的宽度设置为相同的大小。 如果还有别的东西，那么你可能会得到一个大于自身的“包含块”的内容（因此“溢出”）。
高度的工作方式相同。 有一个例外。 您无法将浏览器窗口的高度设置为100％。 可以计算100％的顶层元素是body（或html？not sure）元素，并且这个元素只是足够容纳其内容。 指定高度：100％将不起作用，因为它没有“父元素”来衡量100％。 窗口本身不算。 ;）
为了让事情完全伸展到窗口的100％，你有两个select：
- 使用JavaScript
- 不要使用DOCTYPE。 这不是一个好习惯，但它使浏览器处于“怪癖模式”，在这种模式下你可以对元素执行height =“100％”，并将它们拉伸到窗口大小。 请注意，您的页面的其余部分可能也必须更改，以适应DOCTYPE更改。
更新：我不知道我是否已经发布了这个错误，但现在已经过时了。 今天，你可以在你的样式表中做到这一点： html, body { height: 100% } ，它实际上会延伸到整个视口。 即使有一个DOCTYPE。 min-height: 100%也可能是有用的，这取决于你的情况。
而且我也不会build议任何人做一个怪癖模式的文件 ，因为它会导致更多的麻烦，而不是解决它们。 每个浏览器都有一个不同的怪癖模式，所以让你的页面在浏览器中一致看起来更难两个数量级。 使用DOCTYPE。 总是。 最好是HTML5 one – <!DOCTYPE html> 。 所有的浏览器，甚至是10年前的浏览器，都很容易记忆和运行。
唯一的例外是当你必须支持像IE5之类的东西。 如果你在那里，那么无论如何你都是自己的。 那些古老的浏览器与今天的浏览器毫无相似之处，这里给出的小小的build议将帮助你。 光明的一面，如果你在那里，你可能只需要支持一种浏览器，它可以消除兼容性问题。
祝你好运！
更新2：嘿，已经很久了！ 6年后，新的select正在现场。 我只是在下面的评论中进行了讨论，在今天的浏览器中有更多关于你的技巧。
选项1 – 绝对定位。 当你知道第一部分的精确高度时，干净利落。
body, html {width: 100%; height: 100%; margin: 0; padding: 0} .first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;} .second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red } .second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row"> <p>Some text</p> <p>And some more text</p> </div> <div class="second-row"> <iframe src="https://jsfiddle.net/about"></iframe> </div>
我们使用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的作者pageY()创build的，
另一种方法是使用这个position: fixed; 在父节点上。
如果我没有弄错， position: fixed; 将元素绑定到视口，因此，一旦你给这个节点width: 100%; 和height: 100%; 属性，它将跨越整个屏幕。 从这一点开始，你可以把<iframe>标签放在里面，并用简单的width: 100%; height: 100%;跨越剩余的空间（宽度和高度） width: 100%; height: 100%; 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>
你可以用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>
以下是一些现代化的方法：
-
方法1 – 视口相对单位的组合/
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>
也许这已经得到了回答（上面几个答案是“正确”的方式），但我想我也只是添加我的解决scheme。
我们的iFrame是在一个div中加载的，因此我需要其他的东西，然后window.height。 而看到我们的项目已经严重依赖jQuery，我觉得这是最优雅的解决scheme：
$("iframe").height($("#middle").height());
当然，“#middle”是div的id。 您需要做的唯一额外的事情就是每当用户调整窗口大小时回想一下这个大小的变化。
$(window).resize(function() { $("iframe").height($("#middle").height()); });
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;
这是我做的。 我遇到了同样的问题，最终在网上search了几个小时的资源。
<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列的表的中间单元格内。
尝试以下方法：
<iframe name="" src="" width="100%" style="height: 100em"/>
它为我工作
你可以用这样的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>
是的，你正在展示一个100％高度的iframe，它的容器：body。
尝试这个：
<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的高度改为你想要的高度。
HTML5新增function：使用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>
我用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％的表格行（如果你想embedded一个iframe来填充高度，设置它的高度是至关重要的）
.iframe-container { display: table-row; height: 100%; }
下面是一个jsfiddle在工作中显示它（没有iframe，因为这似乎不工作在小提琴）
我认为你在这里有一个概念上的问题。 说“我在iframe上设置了高度：100％，结果非常接近，但是iframe试图填满整个页面” ，那么当“100％”不等于“整体”时呢？
你已经要求iframe填充它的容器的整个高度（这是body），但不幸的是它在上面的<div>中有一个块级别的兄弟，你要求它是30px大。 所以父容器总数现在被要求大小为100％+ 30px> 100％！ 因此滚动条。
我认为你的意思是，你想要iframe消耗像框架和表格单元格可以，即高度=“*” 剩下的东西。 IIRC这不存在。
不幸的是，据我所知，没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你减less到两个select：
-
绝对放置你的股利，这将把它从容器中，所以单独的iframe会消耗它的容器高度。 尽pipe如此，这会给你带来其他各种问题，但也许是因为你在做什么，不透明或alignment就没问题。
-
或者，您需要为div指定％高度，并通过这么多来降低iframe的高度。 如果绝对高度真的很重要，则需要将其应用于div的子元素。
经过了一段时间的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; }
testingIE8，Chrome，Firefox 3.6
@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
您可以通过在加载/resize事件时测量身体大小并将高度设置为（全高 – 横幅高度）来完成此操作。
请注意，目前在IE8 Beta2中，您无法执行此onresize，因为该事件目前在IE8 Beta2中被破坏。
或者你可以去老派，也许使用框架 ：
<frameset rows="30,*"> <frame src="banner.swf"/> <frame src="inner.html" /> </frameset>
虽然我同意JS似乎是一个更好的select，我有一个有点CSS只工作的解决scheme。 它的缺点是，如果你不得不频繁地添加内容到你的iframe html文件，你将不得不适应一个百分比低谷时间。
解：
尽量不要为HTML文档指定任何高度，
html, body, section, main-div {}
那么只能编码：
#main-div {height:100%;} #iframe {height:300%;}
注意：div应该是你的主要部分。
这应该相对工作。 iframe确实计算可见窗口高度的300％。 如果您的第二个文档（在iframe中）的html内容的高度小于浏览器高度的3倍，那么它就可以工作。 如果您不需要经常向文档添加内容，这是一个永久的解决scheme，您可以根据您的内容高度find自己需要的％。
这是有效的，因为它可以防止第二个html文档（embedded的一个）inheritance父文档的高度。 它阻止了它，因为我们没有为它们指定高度。 当我们给孩子一个百分比的时候，它会寻找它的父母，如果没有的话，它会占用它的内容高度。 而且只有当其他容器没有被给予的高度，从我的尝试。
“ 无缝 ”属性是一个新的标准，旨在解决这个问题：
http://www.w3schools.com/tags/att_iframe_seamless.asp
分配此属性时，它将删除边框和滚动条，并将iframe的大小设置为其内容大小。 尽pipe只有Chrome和最新的Safari支持
更多关于这里： HTML5 iFrame无缝属性
一个简单的jQuery解决scheme
在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(); } }
你不能设置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 src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
如果您有权访问将要加载的iframe的内容，则可以在其resize时通知它的父级resize。
$(window).resize(function() { $(parent.document) .find("iframe") .css("height", $("body").css("height")); }).trigger("resize");
如果页面上有多个iframe，则可能需要使用id或其他聪明方法来增强.find（“iframe”），以便select正确的。
我认为使用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>
为什么不这样做（对身体填充/边距进行微调）
<script> var oF = document.getElementById("iframe1"); oF.style.height = document.body.clientHeight - oF.offsetTop - 0; </script>
