我有一个小div与溢出:自动;但是当滚动条出现时,它覆盖了大量的div。这可以通过使用overflow:scroll …来避免,但是当没有溢出时,您会得到不好看的褪色的滚动条。有没有一种方法可以将滚动条放在div之外,而不使用overflow:scroll;?谢谢。
这里是一个演示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>
解决方法
如果您可以选择在.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/)。