Html iframe到达页面底部_Html_Iframe_Styles_Height

Html iframe到达页面底部

html iframe

Html iframe到达页面底部,html,iframe,styles,height,Html,Iframe,Styles,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> &l

有没有办法使

的高度正好达到页面底部？使用

高度：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>


你好


如果您的标签内容是固定的，那么您可以尝试相对地调整和的高度。并且您必须保持或标签高度100%，否则它将不起作用。我相信您希望扩展高度以适应动态加载的内容。这就像一场梦
Iframe是body元素的子元素，它与其父元素具有100%的高度，在您可以制作Iframe
整页之前，您必须声明body
的高度并将其制作为整页
试试这个。（我认为如果你把CSS放在一个外部文件中或者仅仅放在标题中会更好）

身体{高度：100%；}
iframe{高度：100%；宽度：100%；}
你好


html，正文
{ 
身高：100%；
边际：0px；
填充：0px；
} 
#分母
{
高度：25px；
}
#divContent
{   
框大小：边框框；
-moz框大小：边框框；/*Firefox*/
-webkit框大小：边框框；/*Safari*/
身高：100%；
宽度：100%；
利润上限：-25px；
填充顶部：25px；
溢出：隐藏；
}
iframe
{
宽度：100%；
身高：100%；
}
标题
尽管使用表格进行布局很烦人，但它们仍然是一致处理垂直尺寸的最佳方式。以下内容仍然在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>


你好

如果你真的想避免使用table元素，你可能会从div标签中获得一些吸引力，比如display:table
，display:table row
，和display:table cell
，但是要准备好在某些浏览器中遇到更烦人的怪癖，您可以精确地为IFRAME
元素设置正确的维度，而无需访问框架本身的DOM（跨域问题），依赖于表格或绝对定位（如果框架上方的内容高度是动态的，则无用）：
示例：
试试这个
<!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>


html，正文
{ 
身高：100%；
边际：0px；
填充：0px；
} 

您可以查看演示
您不能。我以前尝试过这个，但这是iframe的一个问题，它将保持这种方式，直到他们找到一种方法来公开内部html文档的高度。。。遵循标准。如果删除内部文档的DOCTYPE，我想您将有权访问它
 我一直使用高度：100vh；要获得100%的查看端口，请尝试style=“position:absolute；”
，高度应设置为什么？它不起作用。。它只是将高度设置为整个屏幕的高度。但是因为有一段
 
，iframe的底部从屏幕上脱落。您可以添加任何HTML吗？和/或，这些是您的整个页面内容吗？可能重复：不起作用。。它只是将高度设置为整个屏幕的高度。但是因为有一段
 
，iframe的底部从屏幕上掉下来。在您的JSFIDLE链接中，iframe显然没有到达页面的底部……这只适用于相同的域iframe。我在本地尝试了它，它看起来很像。但它没有魔力！我以为这是html\css魔术特奥会，然后你带着js hammer来了，并获得了奖品：）请记住，在使用vh时，仍然存在一个普遍存在的iOS错误-看看哦，谢谢！我不知道我那时会去看一看。不过现在对我来说很管用
<!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>

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

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

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