有人已经问过,DiggBar是如何工作的？在上一个问题中.
虽然有人提供了一个体面的答案但它并没有解决一件事:
Digg如何基于跨不同域的网站内容动态调整其iframe的高度？
这里有很多关于SO的问题和答案,只要框架网址在你自己的域上,就可以根据内容动态调整iframes高度(使用javascript). 但是,Digg似乎已经解决了任何域名网站的这个问题.
任何SO网络程序员都知道他们是如何完成的吗？
注意:iframe不是简单地设置为100%高度.iframe标签根本不起作用.谷歌"100%高度iframe",你会明白我的意思.
Bri*_*ell 18
如果你看看他们的CSS,他们height: 100%用于iframe:
iframe#diggiFrame {
color: #666;
width: 100%;
height: 100%;
z-index: 10;
-webkit-box-sizing: border-box;
}
他们将DiggBar定位在高度为40以上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 ,这是一项正在进行的工作;但是,它适用于所有现代浏览器以启用标准模式).
<!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>