IFRAME到达页面的底部(iframe reaches bottom of page)

有没有一种方法，使的高度<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>

Answer 1:

使用JavaScript / jQuery的，你可以精确地设定为合适的尺寸IFRAME元素，而无需访问框架本身（跨域问题）的DOM，依靠表或绝对定位（无用的，如果框上面的内容是在高度动态的）：

$(function() {
    var aboveHeight = $("#aboveFrame").outerHeight(true);
    $(window).resize(function() {
        $('#frame').height( $(window).height() - aboveHeight );
    }).resize();
});

例如： http://jsfiddle.net/hongaar/jsdYz/

Answer 2:

正如恼人的，因为它是用表格来布局，他们仍然一致地处理垂直尺寸的最佳方式。下面仍然显示周围的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>

如果你真的想避免表元素，你可能会得到一些牵引出div标签与display:table ， display:table-row ，并display:table-cell ，但甚至在某些浏览器更讨厌怪癖准备。

Answer 3:

<!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％，实现这一

Answer 4:

如果你的<p>标签的内容是固定的，那么你可以尝试这种方式，通过调整高度<p>和<iframe> relatively..and你必须保持<html>或<body>标签高度100％，否则它不会工作

Answer 5:

最近，我有同样的问题。我相信你是想扩大的高度，以适应动态加载的内容。这就像一个梦。 :)

<!--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>

Answer 6:

IFRAME这是一个孩子的身体元素是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>

Answer 7:

演示

    <!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>

Answer 8:

你不能。我尝试过这一点，但它与IFRAME它永远保持这样，直到他们找到一种方法，露出内HTML文档的高度...以下标准的问题。如果您取下内部文件的DOCTYPE，我想你有一定的访问权限。请iframe来适应容器的剩余高度的100％

Answer 9:

试试这个...

<!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>

你可以检查演示在这里