7

有没有办法让<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>
4

10 回答 10

7

使用JavaScript/jQuery，可以为IFRAME元素精确设置正确的维度，无需访问框架本身的DOM（跨域问题），依赖表格或绝对定位（如果框架上方的内容是动态的则无用）高度）：

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

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

于 2012-11-08T11:31:03.617 回答
1

尽管使用表格进行布局很烦人，但它们仍然是始终如一地处理垂直尺寸的最佳方式。以下仍然显示 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和的 div 标签中获得一些吸引力display:table-cell，但要为某些浏览器中更烦人的怪癖做好准备。

于 2012-11-08T00:42:47.523 回答
0

尝试这个...

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

你可以在这里查看演示

于 2012-11-08T16:03:53.780 回答
0

演示

    <!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>
于 2012-11-07T06:17:07.080 回答
0

如果您的<p>标签内容是固定的，那么您可以通过调整和相对的高度来尝试这种方式..并且您必须保持OR标签高度 100% 否则它将不起作用<p><iframe><html><body>

于 2012-11-01T05:27:28.267 回答
0

你不能。我之前尝试过这个，但是 iframe 存在问题，它将保持这种状态，直到他们找到一种方法来暴露内部 html 文档的高度......遵循标准。如果您删除内部文档的 DOCTYPE，我想您将可以访问它。使 iframe 适合容器剩余高度的 100%

于 2012-11-08T23:19:00.217 回答
0

我最近遇到了同样的问题。我相信您想要扩展高度以适应动态加载的内容。这就像做梦一样。:)

<!--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>
于 2012-11-03T19:20:25.000 回答
0

作为 body 元素的子元素的 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>
于 2012-11-04T16:53:03.797 回答
0 
<!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>OR<body>标签高度 100% 才能实现这一点

于 2012-10-31T13:13:58.683 回答
0

我一直使用 height:100vh; 为您提供 100% 的视口

于 2016-09-01T18:29:51.087 回答