将滚动条放在带有自动溢出功能的div之外
将滚动条放在带有自动溢出功能的div之外
提问于 2013-05-01 02:10:52
我在overflow:auto;上有一个小的div，但是当滚动条出现时，它覆盖了大部分的div。这可以通过使用overflow:scroll;来避免，但是当没有溢出时，您会得到难看的褪色滚动条。有没有办法在不使用overflow:scroll;的情况下将滚动条放在div之外？谢谢。
这是一个演示jsfiddle
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
}
<div class = "alphabet">abcdefgh<br>
ijklmnop<br>
qrstuvwx
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-01 03:03:51
如果可以在.alphabet周围使用容器元素，您可以在上面设置垂直滚动。我添加了<hr>来伪造一个始终可见的底部边框，这个边框不会同时出现在滚动条下面。
HTML：
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>CSS：
.container{
overflow-y:auto;
overflow-x:hidden;
height:50px;
width:100px;
}
.alphabet{
width:100%;
overflow:visible;
box-sizing:border-box;
border:1px solid;
border-bottom:0;
}
hr{
margin:0;
height:0;
width:85px;
border:0;
border-bottom:1px solid;
}带内边框：http://jsfiddle.net/Q32gG/1/
如果您实际上并不关心滚动条在边框内的显示，您可以删除<hr>并为.container添加一个完整的边框(http://jsfiddle.net/V3MbV/3/)。
Stack Overflow用户
发布于 2013-05-01 02:31:52
与其使用和外部滚动条，为什么不使用一些右填充呢
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
padding-right:15px;
}或者，如果您愿意，可以使用em单位来匹配您正在使用的任何大小的字符。
padding-right:1em;PD:顺便说一下，你的例子中有一个拼写错误。句点应在前，应为.alphabet {
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16306322
复制相关文章
相似问题