概要
CSSプロパティ｢overflow-y｣は、overflow プロパティと同様、ボックス領域からテキストなどがはみ出した場合に、その部分をどう制御するかを指定することができます。ただし、overflow プロパティと違うところはこちらは垂直（y軸）方向の制御になります。
<div class="hidden">コンテンツの高さが80pxを超えた場合縦スクロールバーが表示されます。コンテンツの高さが80pxを超えた場合縦スクロールバーが表示されます。</div>
<style>
div {
width: 200px;
height: 80px;
background-color: #def;
margin-bottom: 10px;
}
.hidden {
overflow-y: scroll;
}
</style>取りうる値
| 値 | 説明 |
|---|---|
| visible | 初期値 |
| hidden | 領域からはみ出た部分は非表示になる |
| scroll | 領域からはみ出る部分があるときはスクロールバーが表示される |
| auto | 閲覧する環境に依存 |
使用例
基本的な各値の例です。ボックスには 200px × 50px の｢領域｣が指定されています。このボックスからはみ出た部分がどのような振る舞いをするか確認してみてください。
<div class="auto">幅と高さを指定したボックス領域からテキストがはみだした場合、閲覧するブラウザに依存する振る舞いをします</div>
<div class="hidden">幅と高さを指定したボックス領域からはみだしたテキストは表示されません</div>
<div class="scroll">幅と高さを指定したボックス領域からテキストがはみだすとスクロールバーが表示されます</div>
<div class="visible">幅と高さを指定したボックス領域からテキストがはみだしても、そのまま表示されます</div>
<style>
div {
width: 200px;
height: 50px;
background-color: #def;
margin-bottom: 10px;
}
.auto {
overflow-y: auto;
}
.hidden {
overflow-y: hidden;
}
.scroll {
overflow-y: scroll;
}
.visible {
overflow-y: visible;
}
</style>