javascript - div 位置绝对...溢出-y :auto and then vertical scrollbar covers some of the content

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 并不完全可见 那是因为垂直滚动条覆盖了它。

如果我设置 overflow-y:scroll。问题消失了。

但是我不想这样做，因为这个 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 中列出的内容，将会有更好的方式来显示该数据。