CSSで垂直スクロールDivを作成するにはどうすればよいですか?

CSS で垂直スクロールを備えた Div を作成する

スクロール可能にする Div を作成するときは、オーバーフロー プロパティを理解することが重要です。デフォルトでは、overflow: auto はコンテンツが div の境界を越えて拡張できるようにし、水平軸と垂直軸の両方にスクロールバーを作成します。スクロールを垂直軸のみに制限するには、代わりに overflow-y を使用する必要があります。

Overflow-y: Scroll

Overflow-y の使用: スクロールは垂直軸を強制します。コンテンツが div の高さを超えるかどうかに関係なく、スクロールバーが表示されます。これは、コンテンツが div の高さを超えていない場合でも、垂直スクロールバーが常に表示されるようにしたい場合に便利です。

Overflow-y: Auto

コンテンツが div の高さを超えた場合にのみ垂直スクロールバーを表示したい場合は、overflow-y: auto を使用します。これにより、コンテンツが div の終わりに達したときに自動的に次の行に改行され、水平スクロールバーが表示されなくなります。ただし、コンテンツが div の高さを超える場合は、垂直スクロールバーが表示されます。

コード例

垂直方向にのみスクロールできる div を作成するには、次の CSS:

<pre class="brush:php;toolbar:false">
div {
  overflow-y: auto;
  height: 400px;
}

このコードは、コンテンツが div の高さを超えた場合に垂直スクロールを可能にする div を生成します。水平スクロールを防止しながら 400 ピクセル。

以上がCSSで垂直スクロールDivを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。