Html DiggBar如何动态调整其iframe'；s的高度基于内容而非其域？_Html_Iframe_Digg

Html DiggBar如何动态调整其iframe'；s的高度基于内容而非其域？

html iframe

Html DiggBar如何动态调整其iframe'；s的高度基于内容而非其域？,html,iframe,digg,Html,Iframe,Digg,在前面的一个问题中，已经有人问过了虽然有人提供了一个体面的答案，但没有解决一件事： Digg如何动态调整他们的 iframe的高度，基于内容跨另一个域的站点这里有大量的问题和答案，可以根据内容（使用javascript）动态调整iframes高度。只要框架url位于您自己的域中。然而，Digg似乎已经解决了任何域的网站的这个问题网络程序员知道他们是如何做到这一点的吗注意：iframe并不是简单地设置为100%高度。iframe标记根本不是这样工作的。谷歌“100%高度iframe”，你

在前面的一个问题中，已经有人问过了

虽然有人提供了一个体面的答案，但没有解决一件事：

Digg如何动态调整他们的 iframe的高度，基于内容跨另一个域的站点

这里有大量的问题和答案，可以根据内容（使用javascript）动态调整iframes高度。只要框架url位于您自己的域中。然而，Digg似乎已经解决了任何域的网站的这个问题

网络程序员知道他们是如何做到这一点的吗

注意：iframe并不是简单地设置为100%高度。iframe标记根本不是这样工作的。谷歌“100%高度iframe”，你会明白我的意思。

iframe在Digg网站上，目标网站在里面，而不是相反。iFrame设置为100%宽度和高度。

如果您查看，他们使用

高度：100%

作为

iFrame

：

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

它们将DiggBar定位在高度为

46px

的上方，因此

iframe

占据100%的剩余空间。它们在

body

元素上使用

overflow:hidden

，将

iframe

完全保持在页面的垂直高度内，而不允许页面滚动。这意味着滚动条将出现在

iframe

中，而不是整个页面。注意，DiggBar的工作方式只在Firefox的怪癖模式下工作；有关如何在标准模式下执行此操作，请参见下文

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

编辑：对于那些不相信我的人，这里有一个建议。要使其填充整个空间，需要将其设置为无边框，并且需要

无边距

编辑2：啊，对不起，我明白你在说什么了。您需要

body

标记上的

overflow:hidden

，以使滚动条按您想要的方式工作

编辑3：要在Firefox中工作，您必须处于怪癖模式；如果您包含一个

声明，这会使您进入标准模式，并且您的

iframe

太小

编辑4：啊，你也可以在Firefox的标准模式下进行编辑。我知道答案了。您还需要将

和

元素的高度设置为

100%

。（请注意，

是的doctype，这是一项正在进行的工作；但是，它可以在所有现代浏览器上打开标准模式）


html，正文{
身高：100%
}
身体{
保证金：0；
溢出：隐藏；
}
#顶栏{
高度：50px；
宽度：100%；
边框底部：1px实心#666
}
#iframe{
身高：100%；
宽度：100%；
边框宽度：0
}
这是我的假迪格巴

HTML问题的一部分是，你不能将任何东西的元素设置为100%高度，然后让它占据整个窗口空间。实现这一点的一种方法是使主体具有窗口的像素高度，并且主体内部的任何东西都设置为100%将是窗口的大小

基本上，只需制作一个绑定到windows onresize事件的JavaScript，并将主体调整为窗口大小

下面是我使用jQuery制作的一个示例

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>


$（窗口）。调整大小（函数（）{
$（'body'）.height（document.documentElement.clientHeight）；
});

使用此功能，您将能够设置div或其他元素，并使其在窗口的全高度下工作。

iframe在“怪癖”模式下可以具有100%的高度。Digg通过省略doctype来实现这一点。

iframe中的100%是声明的父空间的100%。例如：

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */

是的，我知道。但是iframe指向的src指向的是其域之外的URL。因此，出于安全考虑，他们不应该根据内容高度动态调整其大小。iFrame不能这样做。自己试试，设置一个高度为100%的iframe，并将其src设置为。这是行不通的。大多数人最终都会求助于javascript来实现这一点，但当试图在一个iframe中使用src设置为跨不同域的站点时，它失败了。我也很好奇他们是怎么做到的。高度100%会将其扩展到body标签的高度，而body标签的高度不是iframed内容的高度，在大多数情况下都会太小。@brian campbell，看看下面的代码：@brian campbell，你明白我的意思吗？