【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で返信する場合はこちらから。