div位置绝对值..overflow-y:自动，然后垂直滚动条覆盖一些内容

Question

我有一个具有绝对位置的div

在其他一些div中。

http://jsfiddle.net/d8GYk/

 <div style="position: absolute; 
display: block; 
outline: 0px;
 margin: 0px; 
 padding: 0px; 
 top: 0; 
 text-align: left;
 font-size: 11px; 
 font-family: arial; 
 cursor: default; 
 border: 1px solid rgb(170, 170, 170); 
 overflow-x: hidden; white-space: pre; 
 overflow-y: auto; 
 left: 0px; 
 height: 132px;"><div>a                             a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>

正如您所看到的，第一个div并不完全可见这是因为垂直滚动条覆盖了它。

如果我设置溢出-y：滚动。问题消失了。

但是我不想这么做，因为这个div是自动生成的（通过javascript），在很多情况下我不需要垂直滚动条（例如，如果列表有一个、两个或三个项目）

有人能建议如何解决这个问题吗？

Answer 1

如果滚动条可能显示也可能不显示，请使用带有可能滚动也可能不滚动的包装的内容容器。html:

<div class="container">
   <div class="entries">
       <div>ab                          a</div>
       <div>ab</div>
       ...
   </div>
</div>

和css：

.container {
    height: 100px;
    overflow-y: auto;
}
.entries div {
    white-space: pre;
}

演示者：http://jsfiddle.net/gFrbM

也就是说，如果你绝对需要pre空白处理，并且你的行很长，你要么需要双向滚动，而不仅仅是y，这很好地表明你试图呈现内容的方式不是一种好的方式。用户体验对你的用户来说会很差，这取决于你在这些条目div中列出的内容，将会有更好的方法来显示这些数据。

Answer 2

Du您真的需要"空白：pre；"吗？如果你去掉这个部分，我认为它会起作用

Answer 3

为容器内的每个div使用右侧边距：

.container div{margin:0 20px 0 0}

http://jsfiddle.net/Karzin/d8GYk/2/

Answer 4

将其添加到css

{padding-right: 20px;}

原因：滚动条的边框覆盖了div文本。你需要给同样的空间。

http://jsfiddle.net/d8GYk/3/