html – DiggBar如何基于不在其域上的内容动态调整其iframe的高度？

有人在上一个问题中已经问过 How does the DiggBar work?.

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

How does Digg dynamically resize their
iframe’s height,based on the content
of a site across a different domain?

这里有很多关于SO的问题和答案,只要框架网址在你自己的域上,就可以根据内容动态调整iframes高度(使用javascript).但是,Digg似乎已经解决了任何域名网站的这个问题.

任何SO网络程序员都知道他们是如何完成的吗？

注意：iframe不是简单地设置为100％高度. iframe标签根本不起作用.谷歌“100％高度iframe”,你会明白我的意思.

如果你看 their CSS,他们使用高度：iframe为100％：

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

他们将DiggBar定位在高于46px的位置,因此iframe占用了剩余空间的100％.他们使用overflow：隐藏在body元素上以使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;
}

编辑：对于那些不相信我的人,这里是small example.为了让它填满整个空间,你需要将它设置为没有边框,你需要< body>没有利润.

编辑2：啊,对不起,我看到你在说什么.你需要溢出：隐藏在body标签上以使滚动条按你想要的方式工作.

编辑3：看起来你必须处于怪癖模式才能在Firefox中工作;如果你包含<！DOCTYPE html>声明,让你进入标准模式,你的iframe太小了.

编辑4：啊,你也可以在Firefox的标准模式下完成.得到了答案here.您需要在< html>上设置高度和< body>元素也是100％. (请注意,<！DOCTYPE html>是HTML 5的doctype,这是一项正在进行的工作;但是,它适用于所有现代浏览器以启用标准模式).

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

html – DiggBar如何基于不在其域上的内容动态调整其iframe的高度？

猜你在找的HTML相关文章