1

我在类“包装器”中的 div 中遇到了 Disqus iframe 的问题。它显示了一个滚动条，即使浏览器本身也有一个用于浏览器中的大图像的滚动条。

HTML

<section id="commentContainer" class="darkbgType">
    <div id="commentPane">
        <div class="wrapper">
            <h2 class="pbxl">File Title</h2>
            <!--Disqus-->
            <div id="disqus_thread"></div>
            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                var disqus_shortname = 'inspectacle'; // required: replace example with your forum shortname
                var disqus_identifier = '@file.fileHash';
                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a><!--end Disqus-->
        </div><!--end wrapper-->    
    </div><!--end commentPane-->
</section><!--end commentContainer-->

CSS

#commentContainer {
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
}

#commentPane {
    background: #181818;
    height: 100%;
    padding: 40px 24px 40px 40px;
    width: 300px;
    position: fixed;
    overflow: hidden;
}

.wrapper {
    overflow: auto;
    height: 100%;
    width: 100%;
}
4

2 回答 2

2

您正在使用overflow:auto，这意味着您告诉浏览器它应该在出现溢出时使用滚动条。

如果您只想将滚动限制在单个轴上，请使用overflow-x或overflow-y。

[编辑] 双滚动条是由于文档主体的高度超出了 100% 的视口大小，因为您在分配给 100% 的顶部添加了额外#commentPane的填充。我建议您使用border-box: box-sizing使得最终高度包括边框宽度（如果有）和您包含的填充。

于 2013-03-04T01:11:14.267 回答
0

如果我正确地看待它，一切似乎都在正常工作。评论在其容器中不垂直，并为它们显示滚动条。左侧的图像太大，因此浏览器右侧的滚动条用于滚动页面。

我唯一的假设是您不希望overflow-y: hidden该容器所需的评论上有滚动条。

于 2013-03-04T01:16:23.043 回答