Question

我在这个问题上花了10个小时，但我仍然无法解决。我正在使用带有disqus注释的bootstrap 3。不知何故disqus评论与我的页脚重叠。见下图。

enter image description here

我尝试了许多技巧，但没有一个有效。

以下是我的HTML代码：

<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

.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;
}

这是我到目前为止所做的：

使用js更改了iframe大小但不起作用

setInterval（function（）{

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

将disqus_thread高度更改为400px，但在发布新评论时不会更改高度
使用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

您可以像这样处理已加载的事件

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

Answer 2

可能存在大量内容，您需要提供指向您网站的链接，以便进行正确诊断。代码示例不够，因为问题将来自您网站的CSS（最有可能）。

可能是罪魁祸首：

no＆＃34; clear：both＆＃34;评论和页脚之间或之间的属性。
或者，尝试clear:both;到#comments
页脚元素有一些疯狂的负上边距，或者有位置：绝对。

我理解它的jQuery会导致动态加载的对象破坏事物。但在我看来，解决方案实际上是防弹CSS。

确保以下CSS属性：

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

适用于页脚和＆amp;注释ID＆＃39; s /元素，或者您在主区域和注释以及注释和页脚之间有一个全宽度块清除元素。或者，您可能只是将这些应用到#comments div（即：只是让它自我清晰，无论它有多高）。

如果此STILL无效，请将溢出：隐藏在#comments上。它不会很精彩，但至少它会阻止你描述的行为：）

Answer 3

我通过从position:relative css规则中删除.sections来解决了这个问题。

Disqus评论与我的页脚重叠

3 个答案: