Disqus 주석이 내 바닥 글과 겹치고 있습니다.

Question

이 문제에 대해 10 시간을 보냈지 만 해결할 수 없습니다. 나는 disqus 코멘트와 함께 부트 스트랩 3을 사용하고 있습니다. 어떻게 든 disqus 코멘트가 내 꼬리말을 겹치고 있습니다. 다음 그림을 참조하십시오.

나는 많은 트릭을 시도했지만 그들 중 누구도 일했다. JS를 사용하여

1. 변경된은 iframe 크기를하지만 그렇지 않은 :

   여기

   .wrapper { 
       width:100%; 
       min-height: 100%; 
       height: auto !important; 
       height: 100%; 
   } 
   .sections { 
       width: 100%; 
       padding-top: 20px; 
       border-bottom: #d8d8d8 solid 1px; 
       height: auto !important; 
   } 
   #comments { 
       width: 100%; 
       min-height: 350px; 
       height: auto !important; 
   } 
   

   내가 지금까지 한 일이다

   <div class="wrapper"> 
       <div class="sections"> 
        <div class="row"> 
         .... truncated unnecessary code 
         <div id="comments"> 
          <div id="disqus_thread"></div> 
         </div> 
        </div> 
       </div> 
   </div> 
   <footer> 
       ..... 
   </footer> 
   

   CSS : 다음

   는

   내 HTML 코드 직장

   s etInterval (함수() {

   $('#comments').css({ 
       'height': $('#disqus_thread').height() + 'px' 
       }); 
   }, 1000); 
   

2. 가 ~ 400 disqus_thread 높이를 변경하지만 새로운 코멘트

   가 이 하나가

   사용 Disqus에 onReady은 iframe의 높이를 변경하는 이벤트에 불과하다

게시 된 높이를 변경하지 않습니다 또한 작동하지 않습니다. 아마도 onReady 이벤트를 호출 한 후 disqus 주석이로드되고 있습니까?

JS 코드

this.callbacks.onReady = [function() { 
    resizeIframeWidth($('#disqus_thread iframe')); 
}]; 

function resizeIframeWidth(e){ 
    // Set width of iframe according to its content 
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax 
     e.width = e.contentWindow.document.body.scrollWidth; 
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax 
     e.width = e.contentDocument.body.scrollWidth + 35; 
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8 
    e.width = e.contentDocument.body.offsetWidth + 35; 
} 

Answer 1

나는이 문제를 .sectionscss 규칙에서 position:relative을 제거하여 해결했습니다.

Answer 2

이가 될 수 가지의 힙은이 제대로 진단하는 데 발생하는 위치 귀하의 사이트에 대한 링크를 제공해야합니다 것입니다. 코드 샘플은 사이트의 CSS (대부분의 경우)에서 문제가 발생하기에 충분하지 않습니다.

아마

범인 :

1. 아니오 "분명히 : 모두"또는 주석과 바닥 글 사이의 속성입니다.
2. #~ #comments
3. 바닥 글 요소에 약간의 미묘한 음의 위쪽 여백이 있거나 position : absolute가 있습니다.

동적으로로드 된 오브젝트로 인해 문제가 발생하는 jQuery라는 것을 알고 있습니다. 그러나 솔루션은 실제로 제 의견으로는 총알 방지 CSS가 될 것입니다.

있는지 확인 다음과 같은 CSS 속성 :

clear:both; 
width: 100%; 
display:block; 
float: none; 

가 메인 영역과의 의견과 의견 사이의 전체 폭 블록 지우기 요소를 가지고, & 의견 아이디의/요소 또는 대안 바닥 글에 적용됩니다 및 바닥 글. 또는 #comments div에 적용하여 도망 갈 수도 있습니다 (즉, 이동률에 관계없이 자체적으로 명확하게 지정).

이 STILL이 작동하지 않는 경우 #comments에 overflow : hidden을 입력합니다.그것은 훌륭하지는 않지만, 적어도 당신이 묘사하는 행동을 멈출 것입니다.

Answer 3

당신은 내가 간단한`오버 플로우 생각할 겁니다이

 // called by disqus 
    function disqus_config() { 
     this.callbacks.onReady = [function() { 
      // if your code respond to this event to resize the sidebar 
      $(window).trigger('resize'); 
    }]; }