iframe 到达页面底部答案

【问题标题】：iframe reaches bottom of pageiframe 到达页面底部
【发布时间】：2012-10-20 06:04:12
【问题描述】：

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

【问题讨论】：

试试style="position:absolute;"
高度应该设置为多少？
它不起作用..它只是将高度设置为整个屏幕的高度。但是由于有<p ..> .. </p>这一段，iframe的底部从屏幕上掉下来了。
你能添加任何 HTML 吗？和/或，这些是您的整个页面内容吗？
可能重复：stackoverflow.com/questions/90178/…

标签： html iframe styles height

【解决方案1】：

我一直使用 height:100vh;给你100%的视口

【讨论】：

记住使用vh时仍然存在一个普遍的iOS错误是明智的 - 看看caniuse.com/#feat=viewport-units
哦，谢谢！那时我不知道我会看看它。不过目前它对我有用

【解决方案2】：

试试这个...

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

您可以查看演示 here

【讨论】：

【解决方案3】：

你不能。我之前尝试过这个，但是 iframe 存在问题，它将保持这种状态，直到他们找到一种方法来暴露内部 html 文档的高度......遵循标准。如果您删除内部文档的 DOCTYPE，我想您将可以访问它。 Make Iframe to fit 100% of container's remaining height

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我在本地试了一下，看起来pretty much perfect。
但是它没有魔法！我还以为是 html\css 魔术特奥会，然后你带着 js-hammer 来拿奖了 :)

【解决方案5】：

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

【讨论】：

【解决方案6】：

Demo

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

【讨论】：

【解决方案7】：

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>

【讨论】：

【解决方案8】：

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

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

【解决方案9】：

如果你的<p>标签内容是固定的，那么你可以尝试this way，通过相对调整<p>和<iframe>的高度..你必须保持<html>或<body>标签高度100%否则它不会工作

【讨论】：

在您的 jsFiddle 链接中，iframe 显然没有到达页面底部...

【解决方案10】：

<!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的底部从屏幕上掉下来了。