![](https://res.cloudinary.com/zenn/image/upload/s--law1eIVM--/co_rgb:222%2Cg_south_west%2Cl_text:notosansjp-medium.otf_37_bold:catnose%2Cx_203%2Cy_98/c_fit%2Cco_rgb:222%2Cg_north_west%2Cl_text:notosansjp-medium.otf_70_bold:CSS%25E3%2581%25A7%25E3%2583%2595%25E3%2583%2583%25E3%2582%25BF%25E3%2583%25BC%25E3%2581%25AE%25E4%25B8%258B%25E3%2581%25AB%25E9%259A%2599%25E9%2596%2593%25E3%2581%258C%25E3%2581%25A7%25E3%2581%258D%25E3%2581%25AA%25E3%2581%2584%25E3%2582%2588%25E3%2581%2586%25E3%2581%25AB%25E3%2583%25A1%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2584%25E3%2581%25AE%25E9%25AB%2598%25E3%2581%2595%25E3%2582%2592%25E8%25AA%25BF%25E6%2595%25B4%25E3%2581%2599%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vemVubi9pbWFnZS9mZXRjaC9zLS1XLWZPcWJEMS0tL2NfbGltaXQlMkNmX2F1dG8lMkNmbF9wcm9ncmVzc2l2ZSUyQ3FfYXV0byUyQ3dfNzAvaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc2YzYxNGExZmEuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_72/v1627274783/default/og-base_z4sxah.png)
CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する
BRANK
メインコンテンツの高さが足りなくてもフッターが中途半端な位置に来ないようにしたいWebアプリケーションのレイアウトで、①ヘッダー②メインコンテンツ③フッターの3つで構成するというパターンはよくあると思うんですが、👇 こんな感じでフッターの下に中途半端な隙間を作りたくないですよね。これは困る👇 メインコンテンツの高さが短くても、フッターがぴったりビューポートの下にくっつくようにしたいですよね。良いね👇 ただ、フッターが常に下に固定されているのではなくて、メインコンテンツがビューポートより高くなったときには、フッターは下にずれていってほしいんですよね。良いね gridを使うと簡単自分はこれをずっとflexで実現していたのですが、(メインコンテンツの)孫要素の高さを100%にしたいときなんかに色々ややこしくて、gridを使うのがいちばん楽だなーという結論に至りました。gridはすでにブラウザ対応を気にせず使えるCSSプロパティだと思います。HTML<div class="container"> <header>ヘッダー</header> <main>メインコンテンツ</main> <footer> フッター</footer> </div> HTMLをこのように組むとして、CSSを以下のように指定し…