gpt4 book ai didi

html - DiggBar 如何根据不在其域中的内容动态调整其 iframe 的高度?

转载 作者:太空狗 更新时间:2023-10-29 14:41:12 25 4
gpt4 key购买 nike

已经有人问了,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 上有很多关于基于内容(使用 javascript)动态调整 iframe 高度的问题和答案只要框架 url 在您自己的域上。但是,Digg 似乎已经解决了任何域的网站的这个问题。

有没有 SO web 程序员知道他们是如何实现的?

注意:iframe 并非简单地设置为 100% 高度。 iframe 标签根本无法像那样工作。 Google“100% 高度 iframe”,您就会明白我的意思。

最佳答案

如果你看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: hiddenbody 上保留 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>没有边距。

edit 2:啊,抱歉,我明白你在说什么了。你需要 overflow: hiddenbody 上标记以使滚动条按您想要的方式工作。

编辑 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>

关于html - DiggBar 如何根据不在其域中的内容动态调整其 iframe 的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/754519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com