K1ファクトリー
フッタをウインドウ最下部に表示したい（Next.js）

フッタをウインドウ最下部に表示したい（Next.js）

参考サイト「フッタを最下部に表示する5つのテクニック」

当サイトでもページ下部のフッタ（浜松のシルエット）をウインドウ最下部に表示させるために、
上記サイトの5番目の方法（CSS Grid Layout）を使っています。

Tailwinds.cssを使っているので、classNameがコードのようになっております。

components/layout.js

export default function Layout(props) {
	return (
		<div className="min-h-screen grid" style={{ gridTemplateRows: 'auto 1fr auto' }}>
			<Head></Head>
			<Header />
			<div>{props.children}</div>
			<Footer />
		</div>
	)
}

layoutの一番外側のdivタグに対してスタイルシートが以下の様に設定されています。
min-h-screen：min-height: 100vh;　高さをウインドウいっぱいに
grid：display: grid;　Gridレイアウト指定
gridTemplateRows: 'auto 1fr auto'　Grid 3段レイアウト（ヘッダ部分、コンテンツ部分、フッタ部分）
※tailwindsで指定できない部分をインラインスタイルで追加指定しています。

components/footer.js

export default function Footer() {
	return (
		<footer className="mx-auto overflow-hidden w-full relative row-start-3 row-end-4" style={{ height: '25.9vw' }}>
			// フッタコンテンツ
		</footer>
	)
}

footerでは、
row-start-3：grid-row-start: 3;
row-end-4：grid-row-end: 4;
height: '25.9vw'　ウィンドウ幅に対して高さを可変指定。
フッタ部分は、Grid-rowの、3 - 4 になるので、上の様に指定しています。
※下の開発画面のGrid画像も参照してください。

開発画面でGridボタンがあって、確認することが出来ます。

押すと、、

HTML is loading comments...