0

絶対位置を持つ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:scroll を設定した場合。問題は解決します。

ただし、この div は (javascript を介して) 自動生成され、多くの場合、垂直スクロール バーは必要ないため (たとえば、リストに 1 つまたは 2 つまたは 3 つの項目がある場合)、そうしたくありません。

誰かがこの問題を解決する方法を提案できますか?

4

4 に答える 4

0

コンテナー内の各 div に margin-right を使用します。

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

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

于 2013-06-20T16:22:59.527 に答える
0

スクロールバーが表示される場合と表示されない場合は、スクロールする場合としない場合があるラッパーを含むコンテンツ コンテナーを使用します。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これは、コンテンツを表示しようとしている方法が良い方法ではありません。UX はユーザーにとって貧弱であり、これらのエントリ div にリストするコンテンツによっては、そのデータを表示するためのはるかに優れた方法があります。

于 2013-06-20T16:29:30.203 に答える