【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 の単位については、以下のリンク先を参考にしてみてください。

【CSS】高さ・横幅のサイズを画面全体にする簡単な方法｜vw・vh