37

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

ここにデモ 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>
4

2 に答える 2

20

の周りにコンテナ要素を使用するオプションの場合は、.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/ )。

于 2013-04-30T19:03:50.743 に答える