【CSS】fixedで固定した要素内をスクロールさせる方法

今回は、CSSのposition:fixed;で固定した要素内を、縦スクロールできるようにする方法となります。

【CSS】position:fixed;で固定した要素内をスクロールさせる方法

以下のCSSは、classの値にcontentを持つ要素を固定する例となります。

.content {
  position: fixed;
  height: 100vh;
  overflow: auto;
}

通常、要素に対してoverflow: auto;などを指定すると、要素内から内容がはみ出す場合、スクロールバーが表示されます。

しかし、position: fixed;だけで固定した要素には高さの範囲がないため、overflow: auto;などが指定されていてもスクロールバーは表示されません。

そのため、スクロールバーを表示するためには、高さの範囲を指定するプロパティが必要となります。今回の例では、height: 100vh; で画面全体の高さを指定しています。

また、heightの値に指定したvh の単位については、以下のリンク先を参考にしてみてください。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。