CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する

BRANK

メインコンテンツの高さが足りなくてもフッターが中途半端な位置に来ないようにしたいWebアプリケーションのレイアウトで、①ヘッダー②メインコンテンツ③フッターの3つで構成するというパターンはよくあると思うんですが、👇 こんな感じでフッターの下に中途半端な隙間を作りたくないですよね。これは困る👇 メインコンテンツの高さが短くても、フッターがぴったりビューポートの下にくっつくようにしたいですよね。良いね👇 ただ、フッターが常に下に固定されているのではなくて、メインコンテンツがビューポートより高くなったときには、フッターは下にずれていってほしいんですよね。良いね gridを使うと簡単自分はこれをずっとflexで実現していたのですが、（メインコンテンツの）孫要素の高さを100%にしたいときなんかに色々ややこしくて、gridを使うのがいちばん楽だなーという結論に至りました。gridはすでにブラウザ対応を気にせず使えるCSSプロパティだと思います。HTML<div class="container"> <header>ヘッダー</header> <main>メインコンテンツ</main> <footer>　フッター</footer> </div> HTMLをこのように組むとして、CSSを以下のように指定し…