ページコンテンツが少ない時にもフーターをページの最下部に表示_技術三昧ブログ

ホーム » ブログ » ページコンテンツが少ない時にもフーターをページの最下部に表示

@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人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/262.html

閉じる

ページコンテンツが少ない時にもフーターをページの最下部に表示_ブログ_zanmai.net

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