Question

在前一个问题中，有人已经问How does the DiggBar work?。

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

Digg如何动态调整他们的大小 iframe的高度，基于内容跨越不同域名的网站？

这里有很多关于SO的问题和答案，可以根据内容动态调整iframes高度（使用javascript）只要框架网址在您自己的域中。但是，Digg似乎已经解决了任何域名网站的问题。

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

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

Answer 1

如果您查看their CSS，他们会height: 100%使用iframe：

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

他们将DiggBar定位在高于46px的位置，因此iframe占用了剩余空间的100％。他们在overflow: hidden元素上使用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 ：啊，对不起，我看到你在说什么。您需要overflow: hidden标记上的body才能让滚动条按您希望的方式工作。

编辑3 ：看起来您必须处于怪癖模式才能在Firefox中运行;如果您添加了<!DOCTYPE html>声明，则会使您进入标准模式，而iframe声明会过小。

编辑4 ：啊，你也可以在Firefox的标准模式下完成。得到了答案here。您还需要将<html>和<body>元素的高度设置为100%。（请注意，<!DOCTYPE html>是HTML 5的文档类型，这是一项正在进行的工作;但是，它适用于所有现代浏览器以启用标准模式。）

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

Answer 2

HTML的一部分问题是，您不能将任何事物的元素设置为100％高度，并占用整个窗口空间。一种方法是使主体具有窗口的像素高度，并且设置为100％的主体内的任何东西都将是窗口的大小。

基本上只需创建一个绑定到windows onresize事件的JavaScript，并将其调整为窗口大小。

这是我使用jQuery做的一个例子

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

通过这个，你可以设置一个div或其他元素，让它在窗口的整个高度上工作。

Answer 3

在怪癖模式下，iframe的高度可以达到100％。 Digg通过省略doctype来实现这一目标。

Answer 4

iFrame位于Digg网站上，里面有目标网站，而不是相反。 iFrame设置为100％宽度和高度。

Answer 5

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 */

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

5 个答案: