Bloosh Company

記事のサムネイル画像です。

2017年8月2日

Development>フロントエンド

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

,

※2019年4月27日
display:flexが発明されたので、古い記事になりました。
新しい記事はこちら

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

 
常に最下部に表示する方法はありますが、
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設定するの面倒だし、真ん中に表示されてるよりは良いかな~。

フッターの高さが分からないときでも常に最下部に表示する | ブルーシュカンパニー

<<次の記事

MagentoのSOAP APIで属性を指定して取得する