看看这个链接 http://www.equispot.com/horses-for-sale/416。向下滚动一点,您应该会看到一个 Facebook 评论插件,其下方嵌入了 Google 地图。
我的问题是,评论插件的底部和地图的顶部之间有大量的空白。 Firebug 指示空白位于评论插件的底部(而不是地图的顶部)。但是,我似乎找不到消除它的方法。
我尝试过使用相对 CSS 定位将地图向上移动 50 像素,但如果碰巧有任何评论,它就会位于评论的顶部。此外,如果用户关闭了 FB 评论,也会破坏布局。
关于如何消除过多的空白有什么想法吗?
UPDATE:虽然这里提供的答案为我指明了正确的方向,但最终却带来了太多麻烦。我只是将 Facebook 评论放在页面底部的 Google 地图下方,这在一定程度上掩盖了问题。根据下面一位评论者的说法,显然这是一个错误,所以我们只能等待修复。
EDIT: 一直在尝试这些风格,但没有运气。我可以根据 Jason 的建议最初更改框的高度,但我所做的任何事情都会搞砸布局(新评论出现在地图后面,因为评论区域保持与其原始高度相同的高度,而不是允许 Facebook 动态增长添加注释时其 IFRAME 元素的高度)。还有其他想法吗?
EDIT #2:问题的根源似乎是 Facebook 自动为包含评论框的 IFRAME 分配了 200px 的高度。添加评论后,Facebook 会动态地将 IFRAME 的大小调整到适当的高度。如果我能找到一种方法使默认的 200px 从 145px 开始,我就能解决我的问题。不确定这是否可能,或者为什么 Facebook 会认为 200(任意?)是一个很好的起点。
EDIT #3:我意识到空白来自 Facebook 生成的 IFRAME,对此我无能为力。我开始对这个问题悬赏,因为:
1)我很难相信我是唯一对此显示方式有疑问的人。
2)这可能是由于我配置某些东西的方式造成的?
3)还有一些我没有想到的其他解决方法。
希望赏金能鼓励一些有创意的回复!
不要将高度设置为自动,设置溢出...
在 Facebook iframe 上设置 height:110px 和 Overflow:auto - 然后评论将动态扩展 iframe 的高度。
在您的 $().ready 函数中弹出这些更改 - 这对我来说效果很好。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)