JSPを開発していますが、デザインにはBootstrapを使用しています。
今回はヘッダーとフッターを付けよう!っていうテーマでBootstrapを調べていました。
やりたいイメージとしてはこれ
https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/
このヘッダーとフッターの配置にしたい。
でもこうかな?と思って抜粋して色々試してみてもフッターが上手く画面下部に張り付きません。
で、サンプルダウンロードして不要そうな所消してフッターの位置だけ保持できたのがコチラ。
<!doctype html>
<html class="h-100">
<head>
<meta charset="utf-8">
<title>Sticky Footer Navbar Template · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex h-100">
<!-- Begin page content -->
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
HTMLとBODYにもクラスを設定しなきゃいけなくて、これによって「mt-auto」が上手く動くようになっているようです。
やっぱりコレかな?と思いながら追記していくより、不必要そうなものを消して結果を確認していく方が早く回答が得られますね。
Bootstrap便利だけど、色々ありすぎてもはやJqueryを使っている気分になりますね。