【HTML】CSSでフッター固定

CSSでフッター固定の方法を調べてみると色々あるが、その中から1番簡単そうなものを選んで試してみた。

 

結論から言うと、フッターのdivを以下にすれば固定できた。

<div id="footer_kotei" data-role="footer" data-position="fixed" data-fullscreen="true">

 

固定することにより、コンテンツ部分がフッターに重なってフッターが隠れる現象が起きたので、それは以下の「z-index」で解決。

div#footer_kotei{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 9999;
}

 

それによって今度はコンテンツ部分の最下部がフッターに隠れて見えない現象が発生したので、コンテンツ部分のbottomにpaddingを指定し解決。

#contents{
	padding: 0 0 50px 0;
	height: 100%;
	overflow: auto;
}