ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

フッターの高さが分からないときでも常に最下部に表示する

,

※2022年3月29日
display:gridが発明されたので、古い記事になりました。
新しい記事はこちら

 
 
表示するコンテンツが少ないと、
フッターが真ん中あたりに表示されてしまいます。
 

 
常に最下部に表示する方法はありますが、
CSSだけでそうするにはフッターの高さが分かっている必要があります。
 
最近はレスポンシブデザインが主流なので、
フッターの高さを何ピクセル!とは決めたくない…。
かといってフッターの高さを決めずに、常に最下部に表示するにはJSで設定するしかなさそうです。
 
それはめんどくさいのでCSSだけで挑戦してみたいと思います。
 

<body>
	<div id="main">
		<div id="contents">
			~真ん中のコンテンツ~
		</div>
		<div id="footer">
			~フッター~
		</div>
	</div>
</body>

 
上記のようなHTML構造のとき、CSSで下記のように設定します。
 

html, body{
	height: 100%;
}
#main{
	position:relative;
	width: 100%;
	height:auto !important; /*IE6対策*/
	height: 100%; /*IE6対策*/
	min-height: 100%;
}
#footer{
	position: absolute;
	top: 100%;
}

 
細かい見た目の調整は省いています。
ポイントは#mainにposition:relative;、フッターにposition:absolute;top: 100%;を設定していることです。
他のサイトではbottom: 0;にしているかと思います。
こうすることで、フッターの高さ、mainのpaddingなど数値を気にせず、フッターが常に最下部に表示されます。
 

 
フッターはいずこへ?
スクロールすると・・・
 

 
ありました!
難点は、コンテンツが少なくても必ずウィンドウ高さより下に表示されるので、スクロールしなければいけないこと。
JS設定するの面倒だし、真ん中に表示されてるよりは良いかな~。

フッターの高さが分からないときでも常に最下部に表示する #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #ウェブデザイン #フッター

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。