WEBデザイン全般

Question:ボックスに縦スクロールバーを表示するには?

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Question:ボックスに縦スクロールバーを表示するには?

ボックスに縦スクロールバーを表示する方法です。

限定された面積のボックス内に文字などが収まらない場合、
縦スクロールバーを自動で表示します。

例:HTML

<div class="box-scroll">
    <p>文字など・・・・・・</p>
</div>

例:CSS

.box-scroll {
    height: 7em;    
    overflow: auto;  
    padding:10px;
    border: solid 1px #747474; 
    background-color:#FBF2C3; 
    }

デモページはこちら

cssの「overflow: auto」で縦スクロールバーを自動表示させます。
「height」で高さを規定します。

ちなみに「overflow: scroll」にすると、縦と横のスクロールバーが自動表示されます。

また、ボックス内に文字等がキッチリ収まる場合は、スクロールバーは表示されません。

参考サイト

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る