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

投稿日: 投稿者:

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

さてさて、

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

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

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

デモ

html

[xhtml]

ダミー領域

[/xhtml]

CSS

[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;
}
[/css]

こういうブログもありました。

人気のあるブログ：

「下までスクロールしたら隠れていたフッタが現れるサンプル htmlとcssで」への2件のフィードバック

  1. ピンバック: ヘッダーとフッターの存在感 | 3000 Leagues in Search of Russia

  2. ピンバック: ヘッダーとフッターの存在感 - 3000 Leagues in Search of Russia

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。