如何在DiggBar动态调整基于没有自己的域名内容的iframe的高度？

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

题

有人已经提出，怎样的DiggBar工作？前一个问题

虽然有人提供一个体面的答案是没有解决一两件事：

  

如何Digg的动态调整自己的   iframe的高度，基于内容   跨越一个不同的域的站点的？

有很多的问题和答案在这里SO动态调整的iframe的高度基于关内容（使用JavaScript）的只要陷害网址是你自己的域名。然而，Digg的似乎已经解决了这个问题与任何域的网站。

做任何SO Web程序员有任何想法，他们是如何实现的呢？

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

有帮助吗？

解决方案

如果你看一下他们的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;
}

修改：对于那些谁不相信我，这里是一个的小例子的。为了让它充满整个空间，需要将其设置为无边框，你需要<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>

其他提示

与HTML问题的一部分，你不能只是设置的任何事情100％高度的元素，让它占据整个窗口空间。这样做的一种方式是通过使身体有所述窗的像素高度和主体设定为100％内的任何东西将是窗口的大小。

基本上只是使捆绑到窗户在onResize事件JavaScript和具有它调整体向窗口的大小。

这里是使用jQuery我提出的示例

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

有了这个，你就可以设置一个div或者其他元素并使其在窗口的整个高度工作。

的iframe可以具有高度怪异模式100％。 Digg的通过省去文档类型实现这一目的。

在的iFrame是Digg的网站与内部的目标网站，而不是周围的其他方法上。所述iFrame被设定为100％的宽度和高度。

在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 */
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top