Getting the height of a 'Facebook Comments' widget/social plugin

Question

Using Facebook Javascript SDK+XFBML, I'm implementing the fb 'comments widget', as explained here.

then, using the fbml line:

<fb:comments href="someurl.com" num_posts="2" width="400"></fb:comments>

creates an iframe with the comments widget.

The height of the iframe is of-course according to the length of the comments;
I need to make changes to my page according to the height of the comments widget.
I can tap into when the widget has finished loading, by using

FB.Event.subscribe('xfbml.render')

(I found it more accurate than using 'ready' or 'load'), but I cannot get the height of the comments iframe due to cross-domain restrictions.

Does anybody know of some sort of a solution for this?

Thanks.

EDIT:
Workaround number 1: (from http://startdevelopment.blogspot.com/2011/03/issue-with-facebook-comments-box-height.html):

add a style to your page:

.fb_ltr { height: 400px !important; overflow-y: scroll !important; }

'fb_ltr' is the class used by the iframe. This will make sure it's always 400px high, and add scroll-bar to scroll content.
Of-course, the scroll-bar is ugly, so, any other ideas?

Answer 1

I use the same idea as yours, modified the style, but it will use min-heigh Please try this,

.fb_ltr { min-height:100%; }

Answer 2

First of all, thanks for you solution, Yuval A. Second, I found a clean and simple style for scroll bar here: CSS scrollbar style cross browser

In short is this code:

::-webkit-scrollbar {  width: 12px;  /* for vertical scrollbars */  height: 12px; /* for horizontal scrollbars */ } ::-webkit-scrollbar-track {   background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }