删除Facebook评论插件下的空白 [英] Remove white space beneath Facebook comments plugin
问题描述
请查看此链接。向下滚动一下，您应该会看到一个带有嵌入式Google地图的Facebook评论插件。
我的问题是，底部之间有很多空白的评论插件和地图的顶部。 Firebug表示空白处在注释插件的底部（而不是地图的顶部）。
我已经尝试过使用相对的CSS定位来移动地图50像素，但然后它坐在评论的顶部，如果有碰巧有任何。
有关如何消除过多的空白空间的任何想法？
UPDATE ：虽然这里提供的答案指向了正确的方向，但结果是太麻烦了。我只是把Facebook的评论在谷歌地图下面的页面的底部，掩盖了一些问题。显然这是一个错误，根据下面的评论者之一，所以我们只需要等待修复。
EDIT ：Been玩弄这些风格一段时间，没有运气。我可以根据Jason的建议改变框的高度，但是我做的任何事情拧紧布局（新的评论出现在地图上，因为评论区域保持与原始高度相同的高度，而不是允许Facebook动态增长添加注释时其IFRAME元素的高度）。任何其他想法？
编辑＃2 ：似乎问题的根源是Facebook自动分配一个200px的高度到IFRAME包含注释框。添加评论时，Facebook会将IFRAME动态调整为适当的高度。我可以解决我的问题，如果我可以找到一种方法使默认200px开始在145px。不确定这是可能还是为什么Facebook会认为200（任意？）是一个很好的开始的高度。
EDIT＃3 ：我意识到白色空间来自于Facebook生成的IFRAME，我没有什么能做的，具体来说。我开始对这个问题的赏金，因为：
1）我发现很难相信我是唯一一个有这个显示方式有问题的人。 / p>
2）这可能是由于我配置的东西？
不要将高度设置为自动，设置溢出...
在Facebook的iframe上设置height：110px和overflow：auto
在$（）。ready函数中调用这些更改 - 这对我很好。
Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
这篇关于删除Facebook评论插件下的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
