overflow プロパティに scroll を設定します:
div
{
width: 150px;
height: 150px;
overflow: scroll;
}
Try it Yourself ❯
overflow プロパティは、コンテンツが要素ボックスをはみ出した場合どうするかを指定します。
| デフォルト値: | visible |
|---|---|
| 継承: | 継承する |
| アニメーション可否: | 不可。animatable を参照 |
| バージョン: | CSS2 |
| JavaScript 構文: | object.style.overflow="scroll" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
overflow: visible|hidden|scroll|auto|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| visible | はみ出した部分を切取りません。要素のボックスの外側に描画されます。これがデフォルトです | Play it ❯ |
| hidden | はみ出した部分を切取り、表示しません | Play it ❯ |
| scroll | はみ出した部分を切取りますが, 切取った部分が見えるようにスクロールバーを追加します | Play it ❯ |
| auto | はみ出した部分を切取る場合、コンテンツの残りの部分が見えるようにスクロールバーを追加します(ブラウザに依存) | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS チュートリアル: CSS Positioning
HTML DOM リファレンス:overflow プロパティ