とあるプログラマーの覚書

CSS編:ヘッダ部またはフッタ部を、ブラウザ上の固定位置で表示させたい

スポンサーリンク

これは、私が実際に携わっているWebアプリの仕事であった実際の要求です。
メインコンテンツ部、フッター部の2つの部分で構成する画面を作成して欲しい、という話がありました。
その要求内容としては、
・フッタ部は、メインコンテンツ部がスクロールする程長い場合でも必ずブラウザ上で表示された状態にして欲しい
・クライアントとなるブラウザは、IEとiPadのSafari

IEなんてブラウザ、使うんじゃねーよ!と思われる方もおられるかもしれませんが、私が携わっているWebアプリは、企業向けで、基本的にはIEのみをサポートしています。
最近は、iPadが登場してきた為、せめてiPadのSafariにも対応させたい、という事で、少し前にそれにも対応させました。(対応と言っても、さほど大した事はしておらず、レイアウトの調整とか諸々…。)

さて、前述の要求内容ですが、IEだけを考えた場合は、framesetタグを使ってフレーム分けして、各フレームのheight属性などを設定してやれば調整可能です。
但し、iPadのSafariだと、frameタグのheight属性が思惑通りに機能しません。(本記事執筆時点2012年7月現在)
どうなるかというと、コンテンツの長さが、heightで指定した高さ以上ある場合でも、コンテンツの最後まで表示させてしまうのです。
つまり、最後までスクロールさせないと、フッタ部が見えません。
これではダメだという事で、framesetによるフレーム分け以外の代替案が無いかを調べました。
見つけたのは、下記のようなサンプルです。
ヘッダとフッタを固定して常に表示するHTML
上記のHTMLの解説ページは、以下になりますので、サンプルコードは下記ページを参考にして下さい。
ヘッダとフッタを固定して常に表示する方法

上記ページの解説によると、CSSの指定のポイントは、bodyのpadding指定と、header及びfooterのposition指定との事。
bodyのpaddingでヘッダの高さ、フッタの高さを指定出来、header及びfooterにはpositionでfixedを指定すると実現出来るらしいです。

このページを、IEとiPadのSafariで見ると、無事にヘッダー、フッターが必ず表示されている状態となっていました。
CSSって、使いこなせれば相当便利だなと改めて感じました。


スポンサーリンク

URL :
TRACKBACK URL :

Leave a Reply

*
* (公開されません)

*

*

Return Top