0

I have a div with absolute position

inside some other divs.

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>

As you can see the first div is not completely visible That's because the vertical scroll bar covers it.

If I set overflow-y:scroll. The problem goes away.

However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)

Can somebody suggest how to resolve this problem ?

4

4 回答 4

0

Du you really need "white-space: pre;"? If you remove this part i think it is going to work

于 2013-06-20T16:14:12.813 回答
0

Add this to css

{padding-right: 20px;}

Reason: The border of the scroll is covering your div text. you need to give some space for the same.

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

于 2013-06-20T16:14:28.023 回答
0

Use a margin-right for each div inside the container:

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

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

于 2013-06-20T16:22:59.527 回答
0

if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:

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

and css:

.container {
    height: 100px;
    overflow-y: auto;
}

.entries div {
    white-space: pre;
}

Demonstrator: http://jsfiddle.net/gFrbM

That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.

于 2013-06-20T16:29:30.203 回答