※主に自分の振り返り用です。

クレジットカード登録画面の下部に空白が生じるのをなんとかしたい。
写真ではわかりにくいですが、黄色で囲んだところに生じている空白を
無くしたいと思い奮闘しました。

いろいろ調べて、htmlやbodyに

height: 100%;

を当てる方法を試したところ、他のページのビューにも影響が出てしまい
この方法は断念。。。

このあと2時間ほど奮闘しましたが、
card_addクラスに

height: 100vh;

これであっさり解決。

要素の高さ指定で%とvhの違いがよく理解できていなかったので
ここにたどり着くのに時間がかかったようです。

vhと%の違い

【vh】
ページの表示領域に依存する。

height: 100vh;

と指定すれば、高さがページの表示領域いっぱいに表示される

【％】
親要素に依存する。

height: 100%;

と指定すれば親要素の大きさまで表示される。