[Web] 画面サイズに合わせてスクロール部分の高さを追従させる

どうも、もりもりです。

ASP.NETで開発中ですが、ブラウザの高さによってListViewの高さを追従するように動的に変更したく、少し困ったのでメモ。

目次
■ CSSのcalc()で対応
■ ポイント
■ さいごに

■ CSSのcalc()で対応

スクロールさせたい部分はListViewでいうところのItemTemplateです。（ヘッダより下のデータ部）
ということで今回もまずはHTMLでの確認です。（※ すみません、aspxでの確認までは載せていません）
今回はJavaScriptではなくCSSのcalc()で対応しました。

See the Pen FollowScrollHeight by Y Mori (@ymdevx3) on CodePen.

CodePenではResultの表示領域のサイズを自由に変更できないので ソースをコピペしてファイルに保存し、そのファイルをブラウザで直接開いてみてください。

■ ポイント

高さを全て「%」指定していると効きません。 スクロールさせたい要素の親やまたその親など、どこかでサイズが決められていないとダメなようです。 今回は一番上の親の高さを100vhとしています。

■ さいごに

最初はJSでやる気満々だったのですが、それじゃ面白くないなと。 他に方法を探してみるかとググって見たら便利なのがあるじゃない。 しかもJSで書くよりもすっきりしていて良い感じ。 実際にcalc()してる箇所が多いとちょっともっさりした動きにはなってしまいますが。 気にならない程度ならぜひ使ってみてください。

以上、もりもりでした。