下までスクロールしたら隠れていたフッタが現れるサンプル htmlとcssで

by とっしゃん。 on 2012年5月20日, 0 comments
カテゴリ：Webサイト作成
タグ：Web制作
Short URL: http://blog.tstylestudio.com/?p=1076

串木野であったエギング大会にゲストで来られていたみっぴさんに会いたかったけど会えなかった@CyberMameCANです。
愛憎の天気だったのですが、大会はどうだったのでしょうか、気になります。

さてさて、

フッタは、スクロールした時コンテンツの下に繋がっていて、
上にスクロールすると一緒に上がってくるのが普通ですよね。

違う演出をしていたサイトがあったのを思い出したので、ちょっとチャレンジ。
MacのSafariでテストしています。

コンテンツ>が終わったかな・・・の後に更にスクロールしていくと、
下に隠しておいたフッタが現れる（様に見える？）サンプルをCSSで。

デモ

html

<div id="rapper">
	<div id="whitebase">
		<p>ダミー領域</p>
	</div>
</div>

<div id="footer">
	<div id="fBox">
		フッターテキスト、フッターテキスト
	</div>
</div>

<p>ダミー領域</p>

</div>

フッターテキスト、フッターテキスト

</div>

CSS

body {
	margin: 0;
	padding: 0;
}

#rapper {
	width: 100%;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

#whitebase {
	margin: 0 auto;
	padding: 0;
	background-color: #f0f0f0;
	margin-bottom: 170px;
	width: 940px;
	height: 1000px;
	border: 1px solid #999;
}

#footer {
	z-index: -1;
	width: 100%;
	position: fixed;
	bottom: 0;
}
#footer #fBox {
	margin: 0 auto;
	padding: 0;
	height: 150px;
	background-color: #c33;
	font-size: 48px;
	color: #fff;
	text-align: center;
	width: 940px;
}

body {

margin: 0;

padding: 0;

}

#rapper {

width: 100%;

background-color: #fff;

margin: 0;

padding: 0;

}

#whitebase {

margin: 0 auto;

padding: 0;

background-color: #f0f0f0;

margin-bottom: 170px;

width: 940px;

height: 1000px;

border: 1px solid #999;

}

#footer {

z-index: -1;

width: 100%;

position: fixed;

bottom: 0;

}

#footer #fBox {

margin: 0 auto;

padding: 0;

height: 150px;

background-color: #c33;

font-size: 48px;

color: #fff;

text-align: center;

width: 940px;

}

月	火	水	木	金	土	日
« 4月				6月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

サイバーまめカン

鹿児島の出水市でプログラミングしてる人のブログ。MacとLinux, Swift, Python, VBAの温い日常。