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います。つまり、オーバーフローが発生するたびにスクロールバーを使用する必要があることをブラウザに伝えています。

スクロールを 1 つの軸だけに制限したい場合は、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 に答える