少ないコンテンツでもフッターはスクリーンの一番下に表示する簡単なやり方CSS Flex

<bodyclass="Site"><headerclass="Site-header">ヘッダー</header><mainclass="Site-content">少ない中身</main><footerclass="Site-footer">Footer</footer></body>

.Site{display:flex;min-height:100vh;/*ビューポートの高さに対する割合100*/flex-direction:column;}.Site-header,.Site-footer{flex:none;background-color:#99cc00;}.Site-content{flex:10auto;/*flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; shrinkしないように*/padding:var(--space)var(--space)0;width:100%;background-color:#666666;}.Site-content::after{content:'\00a0';/*   */display:block;margin-top:var(--space);height:0px;visibility:hidden;}@media(--break-lg){.Site-content{padding-top:var(--space-lg);}.Site-content::after{margin-top:var(--space-lg);}}.Site-content--full{padding:0;}.Site-content--full::after{content:none;}