6

已经有人问了，DiggBar 是如何工作的？在上一个问题中。

虽然有人提供了一个不错的答案，但它并没有解决一件事：

Digg 如何根据跨不同域的网站内容动态调整 iframe 的高度？

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

是否有任何 SO web 程序员知道他们是如何做到这一点的？

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

4

5 回答 5

18

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

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

他们将 DiggBar 放置在其上方，高度为46px，因此iframe100% 占用了剩余空间。它们overflow: hidden在body元素上使用以iframe完全保持在页面的垂直高度内，而不是允许页面滚动。这意味着滚动条将出现在 中iframe，而不是整个页面。请注意，DiggBar 的工作方式仅适用于 Firefox 的 quirks 模式；有关如何在标准模式下执行此操作，请参见下文。

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;
}

编辑：对于那些不相信我的人，这是一个小例子。要让它填满整个空间，您需要将其设置为没有边框，并且您需要<body>没有边距。

编辑2：啊，对不起，我明白你在说什么。您需要标签overflow: hidden上的body才能让滚动条以您想要的方式工作。

编辑 3：看起来你必须处于怪癖模式才能在 Firefox 中工作；如果您包含一个<!DOCTYPE html>声明，这会使您进入标准模式，并且您的iframe输出太小。

编辑 4：啊，您也可以在 Firefox 的标准模式下执行此操作。在这里得到了答案。您还需要将<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>
于 2009-04-16T02:45:07.533 回答
2

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

基本上只需制作一个与 windows onresize 事件相关联的 JavaScript 并将其调整主体的大小以适应窗口的大小。

这是我使用 jQuery 制作的示例

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

有了这个，您将能够设置一个 div 或其他元素，并让它在窗口的整个高度上工作。

于 2009-04-16T02:55:22.547 回答
1

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

于 2009-12-02T01:36:50.520 回答
0

iFrame 位于 Digg 网站上，其中包含目标网站，而不是相反。iFrame 设置为 100% 的宽度和高度。

于 2009-04-16T02:29:16.447 回答
0

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 */
于 2014-03-14T23:20:56.387 回答