将自动溢出的div放在div外面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我有一个小的div,overflow:auto;但是当滚动条出现时,它覆盖了大量的div。这可以通过使用来避免overflow:scroll;,但是当没有溢出时,你会看到难看的褪色滚动条。有没有办法将滚动条放在div之外而不使用overflow:scroll;

这里是一个演示

.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/

用户回答回答于

为什么不使用一些正确的填充,而不是使用滚动条和外部滚动条

   .alphabet{ display:inline-block;
               overflow-y:auto; 
               overflow-x:hidden;
               border:1px solid;
               height:50;
               padding-right:15px;
             }

或者,如果你愿意,可以使用em单位来匹配你使用的任何尺寸的字符

padding-right:1em;

扫码关注云+社区