Sehen Sie sich den Link an. Scrollen Sie ein wenig nach unten und Sie sollten ein Facebook-Kommentar-Plugin mit einer eingebetteten Google-Karte direkt darunter sehen.
Mein Problem ist, dass zwischen dem unteren Rand des Kommentar-Plugins und dem oberen Rand der Karte eine Menge weißer Platz ist. Firebug zeigt an, dass der Leerraum unten im Kommentar-Plugin liegt (im Gegensatz zum oberen Teil der Karte). Ich kann jedoch keinen Weg finden, sie zu beseitigen.
Ich habe versucht, nur die relative CSS-Positionierung zu verwenden, um die Karte um 50 Pixel zu verschieben, aber dann sitzt sie über den Kommentaren, wenn es welche gibt. Wenn der Benutzer FB-Kommentare deaktiviert hat, wird das Layout ebenfalls verschraubt.
Irgendwelche Ideen, wie man den übermäßigen Leerraum loswerden kann?
UPDATE : Während die hier gegebenen Antworten mich in die richtige Richtung wiesen, war es zu viel Mühe. Ich lege einfach die Facebook-Kommentare unter die Google-Karte am unteren Rand der Seite, die das Problem etwas maskiert. Offensichtlich ist dies ein Fehler, den einer der Kommentatoren unten sagt, also müssen wir nur auf eine Korrektur warten.
BEARBEITEN : Seit einiger Zeit mit diesen Stilen spielen, kein Glück. Ich kann die Höhe der Box anfänglich basierend auf Jasons Vorschlägen ändern, aber alles, was ich mache, vermasselt das Layout (neue Kommentare erscheinen hinter der Karte, da der Kommentarbereich die gleiche Höhe wie seine ursprüngliche Höhe hat, anstatt Facebook dynamisch wachsen zu lassen Höhe seines IFRAME-Elements, wenn ein Kommentar hinzugefügt wird). Irgendwelche anderen Ideen?
BEARBEITEN # 2 : Die Wurzel des Problems ist, dass Facebook dem IFRAME, der das Kommentarfeld enthält, automatisch eine Höhe von 200px zuweist. Wenn Kommentare hinzugefügt werden, ändert Facebook dynamisch IFRAME auf die entsprechende Höhe. Ich wäre in der Lage, mein Problem zu lösen, wenn ich einen Weg finden könnte, um diesen Standard 200px Start bei 145px zu machen. Nicht sicher, ob dies möglich ist oder warum Facebook glauben würde, dass 200 (willkürlich?) Eine gute Höhe ist, um damit anzufangen.
BEARBEITEN # 3 : Mir ist klar, dass der weiße Raum von dem IFRAME kommt, den Facebook generiert, und dass ich nichts dagegen tun kann. Ich habe wegen dieser Frage ein Kopfgeld angefangen, weil:
1) Ich kann es kaum glauben, dass ich die einzige Person bin, die ein Problem mit der Art hat, wie dies angezeigt wird.
2) Es liegt an der Art, wie ich etwas konfiguriert habe?
3) Es gibt noch eine andere Problemumgehung, an die ich nicht denke.
Hoffentlich wird das Kopfgeld einige kreative Antworten anregen!
Stellen Sie die Höhe nicht auf automatisch ein, setzen Sie den Überlauf ...
Höhe einstellen: 110px und Überlauf: Auto auf dem Facebook iframe - dann werden Kommentare die Höhe des iframe dynamisch erweitern.
Machen Sie diese Änderungen in Ihrer $ () .ready -Funktion - das funktioniert gut für mich.
Ich hatte dieses Problem bei mobilen Browsern. Facebook hat diese automatische Erkennung für mobile Geräte hinzugefügt. Es lädt eine andere Version des Plugins, die voller Fehler ist. Setzen Sie das mobile Flag auf "false", um es zu zwingen, die reguläre Version zu verwenden, die keine Fehler enthält. Das hat mich gerettet. Ich hoffe es hilft dir.
Es gibt mehrere Faktoren:
.fbFeedbackContent hat min-height: 165px
iframe hat height: 200px
span -Tag innerhalb des fb:comment -Tags Wenn Sie einen oder alle davon ansprechen, sollten Sie anfangen. Möglicherweise müssen Sie !important verwenden, um einen Teil des CSS zu überschreiben.
Ich litt an dem gleichen Problem. Der zusätzliche Leerraum wird nur angezeigt, wenn noch keine Kommentare vorhanden sind. Du machst also einfach folgendes:
1.) Tauschen Sie das alte Markup aus, da Schritt 2) nicht von HTML5
unterstützt wird 2.) Erstellen Sie ein neues div #commentcount , in das Sie die Anzahl der Kommentare laden. Sie können es mit display:none; ausblenden.
3.) Fügen Sie den folgenden Code in #commentcount : <fb:comments-count href=http://example.com/></fb:comments-count> ein, wobei example.com die genaue URL des Kommentars angibt. In den meisten Fällen ist dies $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP) oder die entsprechenden HTTP-Header-Variablen in anderen Sprachen.
4.) Speichern Sie die Kommentaranzahl in einer Variablen in JavaScript. Sie können die Zählung leicht erreichen. Sie befindet sich innerhalb des #commentcount div in einem span -Element. Wenn Sie sich nicht sicher sind, überprüfen Sie die chrome dev tools oder firebug, es zeigt Ihnen die gerenderte Struktur. (als Facebook kann es irgendwann ändern)
5.) Schreiben Sie einen netten JavaScript-Code, um den Facebook-Kommentarbehälter div if(commentcount==0) zu aktualisieren. Fügen Sie einen Stil hinzu von: height:110px; overflow:hidden; .
6.) Laden Sie die Kommentaranzahl häufig. Wenn Sie einen Kommentar abgeben, können Sie den versteckten Überlauf und die feste Höhe löschen und den neuen Kommentar sehen. Sie können dies mit setInterval() tun.
Es funktioniert!
Eine einfachere alternative Lösung: Sie können style="background-color:#f5f5f5;" für das Kommentarfeld festlegen, wenn Sie beispielsweise eine Site mit F5F5F5 Hintergrundfarbe haben. Die Farbe des Kommentarfelds wird in Ihre Website eingeblendet. Es sieht gut aus.
Ich verwende das FbComments-Plugin für Wordpress und dort können Sie die Anpassungsoptionen festlegen. Das hat das Problem für mich gelöst.
Wo es Kommentarfeldstil und Stil für ganzes Kommentarfeld fragt, geben Sie die gewünschte Höhe ein. Es sollte 72px sein. Sie geben height: 72px; in den dafür vorgesehenen Bereich ein. Vergiss nicht das ;
Tags und Links javascript html jquery css facebook