divの外側にスクロールバーを置くと自動オーバーフローする

Question

私はoverflow:auto;で小さなdivを持っていますが、スクロールバーが表示されているときにdivの大部分をカバーしています。これは、overflow:scroll;を使用することで回避できますが、オーバーフローがない場合は見苦しい薄れたスクロールバーが表示されます。 overflow:scroll;を使わずにスクロールバーをdivの外に置く方法はありますか？ありがとう。ここ

はデモjsfiddle

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

<div class = "alphabet">abcdefgh<br> 
         ijklmnop<br> 
         qrstuvwx 
</div> 

Answer 1

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

あなたが実際に境界線の内側に示すスクロールバーを気にしない場合は、あなたがドロップすることができます<hr>の代わりに、.containerに完全な境界線を追加してください（http://jsfiddle.net/V3MbV/3/）。

Answer 2

代わりに使用し、外スクロールバーの、なぜ一致するem単位を使用して、その

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

それとも、好むかのように、いくつかの右のパディングを使用することではありませんあなたが使用しているサイズの文字で

padding-right:1em; 

PD：ところであなたの例のタイプミスです。ピリオドはアルファベットでなければなりません。