うつ病WEBデザイナーがうつ病を克服するため独学で学んだことをアウトプットして共有するためのブログ

うつWEB

CSS WEBデザイン

【html/css】サイトの高さが足りないときでもフッターを画面の一番下に固定したいときのHTMLとCSS【スマホでもOK】

2019年8月19日

よくあるレイアウトで「ヘッダー」「コンテンツ」「フッター」という構成がありますよね。
ヘッダーは常に先頭にあるから問題ないけど、フッターはコンテンツの最下部に鎮座していてほしいのに、コンテンツの情報量が少ないと不格好な位置に来てしまう。

こういう場合はフッターは画面の下部にいてほしいですよね。

「JavaScriptでwindow.heightを取得してどうのこうの~」って方法も考えられますが、今回は「すっきりCSSだけでどうにかしたい!」という方向けの記事です。

というわけで、今回のテスト用HTMLソースはこちら

<body>
<div class="outer">
	<header>
		<h1>へっだー</h1>
	</header>
	<main>
		<h2>めいんこんてんつ</h2>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
		<p>
		ろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむろーれむいぷさむ
		</p>
	</main>
	<footer>
		ふったー
		<div>©rolem ipsam</div>
	</footer>
</div>
</body>

一般的な header,main,footer という構成だけど、大外にouterというクラスのdivで全体を囲っているのは、例えば横からスライドするメニューを実装する場合やモーダルウィンドウを使ったりする場合に非表示になる要素とメインのhtml部分とを区別してスタイルを適用したりとかしたい場合に必要になってくることもあるので、一応つけてます。

で、スタイルシートはこちら

body{
	margin: 0;
}
		header{
			background-color: #d90000;
			text-align: center;
			padding: 1em;
		}
			h1{
				color: white;
				margin: 0;
			}
		main{
			text-align: center;
			padding: 1em;
		}
		footer{
			background-color: #247823;
			color: white;
			text-align: center;
			padding: 1em;
		}

とりあえずイタリアーノな配色。どうでもいいですけどね。
この状態だと最初のキャプチャ画像のように

コンテンツの量が少ないと、なんとまあ不格好。パンツを上まで上げすぎてくいこんじゃってんじゃねーか?って印象を与えるのがよろしくない(ような気がする)。

というわけで、footerをポジション指定してページ最下部に鎮座してもらいましょう。

まずは、footerにCSS追加

position: absolute;
bottom: 0;
width: calc(100% - 2em);

position:absoluteで絶対位置指定にして、bottom:0で下端からの距離をゼロにすると画面最下部にいっちゃいます。

ちなみにwidth:calc(100% - 2em)とありますが、「100%でいーんじゃないの?」って思われますが、先にfooterに「padding: 1em」としてしているので100%で指定すると「100% + 左1em +右1em」の幅になっちゃうので、calcで計算して、 100%から2em引いた幅にしているんです。calcって便利ですよねー。

で、こうなった

一見問題ないように見えるけど、コンテンツの量を増やしてみると

スクロールするとフッターの下にはみ出してしまった。これはいかん、恥ずかしい。

なので、ページ全体を囲っている<div class="outer">に高さを指定するため下記CSSを適用。

	.outer{
		position: relative;
		min-height: 100vh;
	}

position: relatie とすることで、outerが親要素になり、footerを後から position: absolute で位置を絶対指定するんだけど、outerの中身が十分な量があるときはその高さ、すくないときは画面の高さが最小値ってことにしたいので、「min-height: 100vh」で、outerの高さを指定します。「最低でも100vh」という指定だけど「vhってなんやねん?%とちゃうんけ?」ってことですよね。

vh というのは「viewport height」のことで、レスポンシブのhtml書く時、metaタグでviewport設定しますよね。

つまり画面サイズのことで「100vh」だと100%の画面の高さってことになります。ちなみにvw(viewport width)もあります。

するとこうなる

おっと、コンテンツの一部がfooterに隠れてしまっている!そんな隠すような卑猥なコンテンツでもないのに!

つまりfooterは絶対指定になっているので コンテンツ部分のmain の最下部は隙間ゼロってことになってるので、footerとmainの下端部分は同じ高さ位置に設定されちゃってるんですね、ちくしょう。

ならばということで、今度は mainタグに以下のCSSを追加。

padding-bottom: 5em;

フッターの高さ分余白を作っちゃえ!ってことですよね、わかりますよね。

ちなみにフッターの高さは「5em」って決まってるわけじゃないですから、実際作成するときはその時のサイトのfooterの高さに合わせて数値は調整してくださいね。emじゃなくても px とかでも大丈夫ですよ(わかってるっちゅーねん)。

これでなんとか格好がつきました!よかったです!

-CSS, WEBデザイン
-, ,

Copyright© うつWEB , 2019 All Rights Reserved Powered by AFFINGER5.