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

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

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

以下、CSSの例となります。

.content {
  position: fixed;
  top: 20px;
  bottom: 20px;
  overflow: auto;
}

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

しかし、position: fixed;で固定したボックスに、top・bottomのいずれかひとつのプロパティで、ボックスの縦の表示位置を設定した場合、overflow: auto;などが指定されていてもスクロールバーは表示されません。

そのため、position: fixed;で固定したボックスにスクロールバーを表示するには、上記例のようにtop・bottomプロパティともに指定し、ボックスの縦の範囲を設定する必要があります。

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。