Facebook IFrame 자동 크기 조정 스크롤 막대 포함 여전히

Question

나는 이것을 잠시 동안 고치려고 노력했지만 운이 없었습니다. 나는 스크롤 막대를 포함하는 페이스 북 앱 (witdh : 510)을 가지고있다. 이것은 페이스 북에서 보이는 것입니다 :

내 응용 프로그램에는 510보다 큰 너비가 없으므로 첫 번째 장소에 공백이있는 이유가 무엇인지 혼란 스럽습니다. 나는 또한 애플 리케이션에 맞게 페이지에 분명히 충분한 공간이 있기 때문에 왜 수직 스크롤 막대가 있는지 이해하지 못한다.

내 앱 설정에서 자동 크기 조정이 호출되었으며 이 내 window.fbAsyncInit 함수에 있습니다. 또한 CSS 재설정 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">을 사용해 보았지만 문제가 해결되지 않았습니다.

제안 사항? 당신이 당신의 iFrame에의 크기는 항상 내용을 표시 할 것이 확실한 경우

Answer 1

는, 당신은 설정되지 수 :

<iframe src="yourpage.htm" scrolling="no"></iframe> 

스크롤 = "아니오"이, 스크롤바를 표시하지 않도록 iframe이 강제도 콘텐츠가 프레임보다 큰 경우

스크롤바를 표시하지 않으려면주의해야하지만 조심해서 사용해야하며 사용자가 범위를 벗어나면 스크롤 할 수있는 명확한 방법이 없기 때문에 내용을 숨길 수 있습니다. iFrame의 당신은 분명히 페이스 북에 설정할 수 없기 때문에

--edit--

, 당신은 단순히 당신이 래퍼 사업부에서로드하는 페이지를 포장하고 거기에 높이, 폭, 및 오버 플로우 속성을 설정해야합니다.

<div class="wrap" style="height:500px; width:510px; overflow:hidden;"> 
    your page content here 
</div> 

오버 플로우 : 숨김; 스크롤바가없는 경우 또는 overflow-x : hidden; 수평 스크롤 막대 만 숨기기위한 또는 overflow-y : 숨김;은 세로 스크롤 막대 만 숨기기위한 것입니다.

Answer 2

먼저 "방화 광"과 같은 iframe HTML를 검사하면 모든 div를 확인하고 방화 광의 왼쪽에있는 "레이아웃"탭을 확인하십시오. 요소 크기, 테두리, 패딩을 볼 수 있습니다 여백 등 모든 것이 맞는지 확인하십시오.

이제 나에게 무슨 일이 일어 났는지는 일부 브라우저에서는 페이스 북에서 "자동 크기 조정"기능이 제대로 작동하지 않아서 높이를 잘못 계산하고 오른쪽에 여전히 스크롤바가 있기 때문에이 스크롤 막대 때문에, 내용이 너무 커지고 가로 스크롤 막대가 생깁니다.

이 내 솔루션은 나 자신은 iframe의 높이를 지정하고 자동 크기의 물건을 사용하지 않는, 여기에 (닫는 </body> 전에 페이지의 마지막에 넣어)이 작업을 수행하는 코드입니다했다 :

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 

    FB.init({appId: '{{fbapp_id}}', status: true, cookie: true,xfbml: true}); 

    window.setTimeout(function() { 
     FB.Canvas.setSize({height:900}); 
    }, 250); 

    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

는 여기에 내가 choosed 할 높이가 "900"하지만 당신은 자신의 높이 (당신은 iframe 콘텐츠의 높이 + 그래서 50 픽셀 또는 같은 몇 가지 보안 마진)

은 또한 당신이 당신의 진짜 페이스 북의 응용 프로그램에 의해 {{fbapp_id}}를 교체해야을 설정해야 신분증.

이 정보가 도움이되기를 바랍니다.

Answer 3

첫째, (: 숨겨진 여전히 스크롤, 오버 플로우를 얻을 경우)

body { 
padding:0; 
margin:0; 
} 

(520)에 폭을 설정 사업부에 콘텐츠를 CSS를 통해 몸에서 패딩 & 마진을 제거합니다. 이 DIV에 패딩과 테두리가있는 carfull (자세한 내용은 http://www.w3.org/TR/CSS2/box.html 참조)

매우 긴 내용이있을 때이 div에 최소 높이를 설정하는 데 도움이됩니다. 때로는 세로 스크롤 막대가 생기고 가로 스크롤 막대가 생깁니다. 대신 스크롤의 폐쇄 본체가

FB.Canvas.setSize() 

는 물론, 당신은 앱 설정에서 "자동으로 높이를"만들 설정 바로 befor를 (또는 불리는 방법) 페이지의 끝에

.