0

私はFacebook comments自分のページでプラグインを使用していますが、問題はブラウザ全体の高さを取っていることです。コメント ボックスの下に表示されるはずの画像を配置しましたが、コメント ボックスがブラウザ全体を占めているため、画像がページの下部に配置されています。

タットの高さを制限するには??

これは私が使用しているコードです。

<html>
    <head>
        <title>Facebook Plugin Sample - Facebook Comments </title>
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </head>
    <body>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-comments" data-href="http://example.com" data-mobile="true"></div>
        <img src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2009/02/toolbox-icon.jpg" style="border:1px #000 solid;" alt="" />
    </body>
</html>

そして、これはそれが今どのように示されているかです

ここに画像の説明を入力

デモ

4

1 に答える 1

0

画像の境界線以外に、ページにスタイリングはありますか?

Firefox の Firebug など、ブラウザの開発ツールでそれを見て、プラグインと画像のスタイルを確認してください。

プラグインを div でラップし、その div の高さをスタイリングしてみてください。

<head>
  <style>
    #comments_wrapper {
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="comments_wrapper">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-comments" data-href="http://example.com" data-mobile="true"></div>
  </div>
</body>

あなたのフィドルは何も表示しませんでした。私はそれをフォークしましたが、表示するコメントはありませんが、機能しているようです。フィドルのリンクは次のとおりです:
http://jsfiddle.net/CodeWaggle/JHzjG/

別のアプローチは、このスタイルを追加することです:

#fb_comments { height:400px; padding-bottom:20px; overflow-y: scroll; }

私はこの答えでそれを見つけました：HTML5 Facebookコメントボックスのサイズを制限する

ここに画像の説明を入力

ここに画像の説明を入力

于 2013-05-09T09:28:51.587 に答える