frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【css】コンテンツの高さ可変のフッター固定

スポンサードリンク


スポンサードリンク


# フッター固定 css


フッター固定させるのを久しぶりにやってみました。
久しぶりにやると結構めんどくさいことになっていました。

html {
    min-height: 100vh;
    position: relative;
    padding-bottom: 100px; 
}

footer {
    position: absolute;
    bottom: 0;
}

上記padding-bottomはフッターの高さですが固定にすると非常に危険なのでJSでフッターの高さを取得した上で、同じ高さのpadding-bottomを入れる必要があります。