我遇到了一个问题,我在类“包装器”中的div中有一个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%;
}
答案 0 :(得分:1)
您正在使用overflow:auto
,这意味着您告诉浏览器,只要出现溢出,它就应该使用滚动条。
如果您只想将滚动限制为单个轴,请使用overflow-x
或overflow-y
。
[编辑]双滚动条是由于文档正文的高度超出视口大小100%所致,因为您已在分配给{{1的100%的顶部添加了附加填充}}。我建议您使用#commentPane
,以使最终高度包括边框宽度(如果有)和您包含的填充。
答案 1 :(得分:0)
如果我正确地看待它,一切似乎都在起作用。注释不能垂直放在容器中,并为它们显示滚动条。左侧的图像太大,因此滚动条位于浏览器的右侧以滚动页面。
我唯一的假设是您不希望评论中的滚动条需要overflow-y: hidden
来容纳该容器。