CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

viewport‑relativelength（ P.310の「縦方向の中央揃え」 参照）、

calc()

課題

Web デザインの世界で、フッターを下端に表示することはとても古く

からある課題です。読者も一度はこの問題に遭遇したことがあるのではな

いでしょうか。ブロックレベルのスタイル（背景や影など）を持つフッ

ターは、コンテンツが十分に長い場合には正しく表示されます。一方、エ

ラーメッセージなどのようにコンテンツが短いページでは、フッターが正

しく表示されません。フッターはビューポートの下端に表示されてほしい

のですが、コンテンツの下端に表示されてしまいます。

この問題がよく知られている背景には、単にしばしば見られるというだ

けではなく、とても簡単に解決できそうに思えるという点もあげられま

す。この問題は、解決するのに予想を大幅に超える時間がかかる問題の典

型的な例です。また、 CSS2.1だけではこの問題は解決できません。従来

の解決策のほとんどでは、フッターの高さが固定されています。これはも

ろい解決策であり、受け入れられることはほとんどないでしょう。しか

フッターを

ビューポート下部に

表示する

41

318

7章：ページの構造とレイアウト

より正確には、ビューポートの高さか

らフッターの高さを引いたものがコン

テンツの高さよりも大きい場合にフッ

ターが正しく表示されなくなります。

も、この種の解決策は過度に複雑で、ハック的なやり方であり、マークア

ップの種類についても制限を受けます。