高さが可変する要素の下にスクロール可能なコンテンツを設置する方法(CSSのみ)

高さが可変する要素の下にスクロール可能なコンテンツを設置する方法(CSSのみ)

2021年4月19日
HTML・CSS

画面の一部のみ縦スクロールを発生させる際に、「高さを固定しない方法で、画面の縦幅いっぱいにスクロールでお願いします!」という要望があり、実装する時少し時間がかかったので解決方法をまとめました。

画面の一部のみスクロールさせる方法で、調べると良くあるCSSが出てきます。

.scroll{
  height: 80px;
  overflow: auto;
}

高さをpxなどで固定するやつですね。

デザインなどで高さが指定されているものでしたら、このCSSで良いと思いますが、今回の要望に当てはまりません。

解決方法のコード

See the Pen スクロール by さえ (@sae1212) on CodePen.

flexboxを使って実現しました。

コードの解説としては以下です。

  • html,bodyにheight: 100%;をかけて縦幅いっぱいの高さにする。
  • 親要素にflexをかける→横並びになるので、flex-direction: column;で縦並びにする。
  • 親要素にはheight: 100%;をかけて縦幅いっぱいの高さにする。
  • 子要素にflex: 1;をかけて横幅いっぱいにする。
  • 子要素にoverflow: auto;をかけて、はみ出る部分をスクロールさせる。

コードを一つ一つ見てみるとなるほど、と思うのですが、なかなか思いつかないのですよね…!

入れ子にする場合

入れ子にする場合は以下です。

See the Pen スクロール(入れ子ver) by さえ (@sae1212) on CodePen.

入れ子にする要素は、「親要素でもあり、子要素でもある」ということから、親要素と子要素両方のCSSをかけてあげます。

参考サイト

以下のサイトを参考にさせていただきました!

HTMLで以下を行う方法がわからなくて困った。ある程度解決したのでこれは、そのメモ書きである。 問題 ヘッダを固定し、その下のコンテンツは自由に上下スクロール可…
www.gwtcenter.com
I am trying to make a flexbox design work. I am not an HTML/css expert. 🙁 I hav…
stackoverflow.com