Sco*_*ott 8 html javascript css jquery facebook
看看这个链接.向下滚动一下,您应该会看到一个Facebook评论插件,其下方嵌入了Google地图.
我的问题是,评论插件的底部和地图的顶部之间有大量的空白区域.Firebug表示空白区域位于评论插件的底部(与地图顶部相对).但是,我似乎无法找到消除它的方法.
我已经尝试过使用相对CSS定位将地图向上移动50个像素,但如果碰巧有任何问题,那么它就会位于评论之上.此外,如果用户关闭了FB注释,它也会拧紧布局.
关于如何摆脱过多的空白空间的任何想法？
更新:虽然这里提供的答案指出了我正确的方向,但它最终太麻烦了.我只是将Facebook评论放在页面底部的Google地图下面,这有点掩盖了问题.显然这是一个根据以下评论者之一的错误,所以我们只需要等待修复.
编辑:一直玩弄这些风格,没有运气.我最初可以根据杰森的建议改变盒子的高度,但是我做的任何事情都搞砸了布局(由于评论区域与原始高度保持相同的高度,新评论出现在地图后面,而不是允许Facebook动态增长添加注释时其IFRAME元素的高度).还有其他想法吗？
编辑#2:似乎问题的根源是Facebook自动为包含评论框的IFRAME分配200px的高度.添加评论后,Facebook会动态调整IFRAME的大小到适当的高度.如果我能找到一种方法使默认的200px从145px开始,我就能解决我的问题.不确定这是否可行,或者为什么Facebook认为200(任意？)是一个很好的高度开始.
编辑#3:我意识到白色空间来自Facebook生成的IFRAME,特别是我无能为力.我开始对这个问题给予赏金,因为:
1)我发现很难相信我是唯一一个对这种显示方式有问题的人.
2)这可能是由于我配置的方式？
3)我还没有想到其他一些解决方法.
希望赏金会鼓励一些创意回复!
不要将高度设置为自动，设置溢出...
在 Facebook iframe 上设置 height:110px 和 Overflow:auto - 然后评论将动态扩展 iframe 的高度。
在您的 $().ready 函数中弹出这些更改 - 这对我来说效果很好。