Edited at

Pure CSS sticky footer with calc( vh )

More than 3 years have passed since last update.


たった2行でフッタをコンテンツが少なくても最下部にするスタイルシート


方法

bodyを以下のように、

Footer以外(above-Footer)と、

Footer部分(stickyFooter)に分けます。

<body>

<div class="above-Footer">
<!--
WebSite-Contents
-->

</div>
<div class="stickyFooter"></div>
</body>

そして以下のスタイルを適用します。

.above-Footer{

min-height: calc(100vh - hoge); /* hoge = stickyFooter height */
}
.stickyFooter{
height: hoge; /* hoge = stickyFooter height */
}

以上です。

たったこれだけです。

※body{ margin:0; padding:0; }が前提です。


解説

まずcalc()とvhの説明を簡単にします。

詳しくは下部の参考を参照ください。

calc()は、見た目の想像通りです、()内を計算してくれます。

vhは、viewport(ブラウザの表示領域?)の高さを100とした高さの単位です。

1vhとするとviewportの1/100の高さになり、

100vhとするとviewportと同じ高さになります。

ということは、

above-Footerのmin-heightは、

「viewportの高さ」から「stickyFooterの高さ」を引いた値になります。

結果、

above-Footerの高さは、小さい値になろうとしてもなれず、

above-Footerの下には、「stickyFooterの高さ」の隙間しか出来ません。

そして、

above-Footerの直後に表示される、

stickyFooterが、その隙間に収まり、画面最下部に必ず表示される、

というわけです。


実演

demo1

code1

※Firefox Chrome Safari IE、

いずれかの最新のブラウザでご覧ください。

demo2

code2

※Firefox ( or Safari? ) でご覧ください。

本投稿箇所は他のブラウザでも動作しますが、

position:stickyを利用した比較用の箇所が動かないため。


注意

前述の通り、本投稿の方法は、calc()とvhを使用しています。

そのため、

Android4.3以下はcalc()とvhともに非対応なので動きません…(つд`)

iOS7はvhが動作不良のようです… ( Can I use - Notes 参照 )

対して、デスクトップはというと、

Firefox Chrome Safari は ok、

IEはなんとIE9以降対応なので、

比較的ハードルは低いかな、と思われます。

※Safari動作の根拠は Can I use です…


追記

ということで、現状でも利用可能と思われる、

Sticky Footer | CSS-Tricks

の内容を利用させていただいた冒頭のhtml用のスタイルです。

html, body {

height: 100%;
}
.above-Footer{
min-height: 100%;
margin-bottom: -hoge; /* hoge = stickyFooter height */
}
.above-Footer:after {
content: "";
display: block;
height: hoge; /* hoge = stickyFooter height */
}
.stickyFooter{
height: hoge; /* hoge = stickyFooter height */
}

demo

code


参考

[ 検索 ]

css calc

css vw vh

[ 対応 ]

Can I use calc() as CSS unit value

Can I use Viewport units: vw, vh, vmin, vmax

[ 詳細 ]

CSS Values and Units Module Level 3 - W3C Candidate Recommendation 30 July 2013

CSS Values and Units Module Level 3 - Editor’s Draft 22 September 2014

calc - CSS | MDN

length - CSS | MDN

[ 追記 ]

Sticky footer using calc and vh units

Sticky footer using calc and vh units

※CodePenに同じアイデアのものが既にありました。