有没有办法使<iframe>的高度正好达到页面的底部？使用height:xx%很难判断，而且可能依赖于浏览器。
代码如下：
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
使用JavaScript/jQuery，您可以精确地为IFRAME元素设置正确的维度，而无需访问框架本身的DOM(跨域问题)，依赖于表或绝对定位(如果框架上方的内容高度是动态的，则没有用)：
$(function() {
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function() {
$('#frame').height( $(window).height() - aboveHeight );
}).resize();
});
示例：http://jsfiddle.net/hongaar/jsdYz/
尽管使用表进行布局很烦人，但它们仍然是一致处理垂直维度的最佳方式。下面仍然在iframe的边缘显示一些白色像素，并且在某些版本的Firefox中有一个额外的滚动条，但与我所能实现的非常接近：
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
如果您真的想避免使用表元素，您可能会从带有display:table、display:table-row和display:table-cell的div标记中获得一些吸引力，但要为某些浏览器中更令人讨厌的怪癖做好准备。
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
好吧，这似乎是一个棘手的问题，但你必须保持<html>或<body>标签高度100%才能实现这个
如果您的<p>标签内容是固定的，那么您可以通过相对调整<p>和<iframe>的高度来尝试这种方法。。并且你必须保持<html>或<body>标签高度100%，否则它将无法工作
我最近也遇到了同样的问题。我相信您希望扩展高度以适应动态加载的内容。这就像做梦一样。：)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
Iframe是body元素的子元素，与其父元素的高度为100%，在使iframe成为整页之前，必须声明body的高度并使其成为整页。
试试这个。(我认为如果你把CSS放在一个外部文件中或只是放在head中会更好)
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
演示
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
#divHeader
{
height:25px;
}
#divContent
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
}
iframe
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
你不能。我以前尝试过，但这是iframe的一个问题，它将保持这种方式，直到他们找到一种方法来暴露内部html文档的高度。。。遵循标准。如果你删除内部文档的DOCTYPE，我想你会有一些访问权限。使Iframe适合100%的容器'；s剩余高度
试试这个。。。
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
你可以在这里查看演示
我一直使用高度：100vh；给你100%的视图端口