ホーム » ブログ » ページコンテンツが少ない時にもフーターをページの最下部に表示
このエントリーをはてなブックマークに追加
@2017/01/12

スポンサーリンク
ページのコンテンツが少ない時に、画面フータ(footer)が上に上げってしまい事象が見たことがありますね。
画面のフーターなのに、ページの中央部頃に上がったら、ページのバランスがもちろん悪くなりますし、
お客様から御サイトへのイメージも良くないと思います。

本記事では、ページのコンテンツが少ないときにも、CSSでfooterをモニターの下部に表示させるサンプルコードを掲載します。
一言でいえば、ページメインコンテンツの高さを調整し、footerを下部に表示させる。
ここで、コンテンツの高さ = ページの高さ - headerの高さ - footerの高さ

DEMO


<style type="text/css">
#container {
    height: calc(100vh - headerの高さ - footerの高さ);
    box-sizing: border-box;
}
</style>

以下のようなページに適用すれば、ページコンテンツがほとんどなくても、フーターもページの最下部に表示できる。

<html>
<body>
<header>
	Here is the header area.
</header>
<div id="container">
	Here is the main contents area.
</div>
<footer>
	Here is the footer area.
</footer>
</body>
</html>


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
1人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
コメント@2017年08月12日
Gravatar-グローバルに認識されるアバター_zanmai.net
Thanks for finally writing about >ページコンテンツが少ない時にもフーターをページの最下部に表示_技術三昧ブログ_zanmai.net <Loved it!

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check