要素が少ない場合でもフッターを画面下に固定する方法2パターン!

web作成

コンテンツ量が少ないページでフッターが浮き上がってしまい、ちょっとカッコワルイな。。ってときの対処法を2パターンご紹介します。

※↑の状態を再現したページを用意しました。→ かっこわるいページデモ

position:fixedではなく、marginやpaddingを場当たり的に入れて誤魔化すのではなく、コンテンツ量が増えた場合にもcssの修正不要で、レスポンシブにも対応した方法です。

javascriptも使いません。cssだけで実装できる方法です!

では早速いってみましょ!

display:flexで対応する方法

今なら問題ないと思いますが、css3を使ってよいサイトであればflexで対応するのが一番シンプルで分かりやすく汎用性も高い方法です。

HTML

<html>
<body>
<header>タネハヤス</header>
<div class="contents">ここにコンテンツが入る</div>
<footer>Copyright © 2019 タネハヤス All Rights Reserved.</footer>
</body>
</html>

CSS

html{
	height:100%;
}
body{
	height:100%;
	display:flex;
	flex-direction:column;
}
div.contents{
	flex-grow: 1;
}

解説

html、bodyにheight:100%を指定して、画面の高さ一杯まで領域を確保させます。

bodyにdisplay:flexを指定し、縦並び(flex-direction:column)を設定する。

するとヘッダー、コンテンツ、フッターが縦に並びます。

コンテンツに「flex-grow: 1 」を指定することで、100%(画面の高さ)からヘッダー、フッターの高さを引いた領域を満たしてくれます。

注意点

  • ヘッダー、コンテンツ、フッターは並列に置いて、それ以外の要素を追加しないこと(3つ以上要素を入れないこと)
  • Androidバージョン4.4から対応
  • iOS Safariはバージョン7から対応
  • IEはバージョン11でもベンダープレフィックスが必要です

サンプルページ

サンプルページを開く

positionで対応する方法

一昔前はpositionでやったり、javascriptで対応してた時代もあります。

flexが使えない状況/条件がある場合はpositionでやる方法もあります。

HTML

<html>
<body>
<div class="wrap">
<header>タネハヤス</header>
<div class="contents">ここにコンテンツが入る</div>
<footer>Copyright © 2019 タネハヤス All Rights Reserved.</footer>
</div>
</body>
</html>

CSS

html,body{
	height:100%;
}
div.wrap{
	min-height:100%;
	position: relative;
	padding-bottom: 100px;
	box-sizing: border-box;
}
div.contents{
	max-width: 800px;
	margin: 0 auto;
}
footer{
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding-top: 30px;
	box-sizing: border-box;
}

解説

フッターの高さ分のpaddingをcontents要素に指定して、その上にフッター要素を乗っけています。

コンテンツ量が増えた場合は、height:100%;の要素は伸びるので問題ありません。

注意点

  • フッターの高さが固定であること
  • bodyタグと同様の領域を確保しているブロック要素の中にフッターを入れること

サンプルページ

サンプルページを開く

まとめ

他にもネガティブマージンや、calcを使った方法がありますが、現状ではdisplay:flexで対応する方法がベストです。

制作を続けていく中で、新しい気付きや方法があれば更新したいと思います。

以上、「要素が少ない場合でもフッターを画面下に固定する方法2パターン! 」 でした。

コメント