footer固定忘備録
凄い久しぶりですね…。
ちょっと色々ありまして、就職活動中です。
どうしても書きたいことができたので。
こちらの記事の内容をインプットしたいため。
それだけです。
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 5em;
}
footer {
bottom: 0;
height: 5em;
position: absolute;
}
どういう仕組みなのか？
- html（全体）を基本（relative）として設定している。
- min-heightを100%にすることで、ページの高さの最小値を100％に設定している。
- bodyとfooterを同じ高さに設定している。
- （厳密にいうと、bodyはfooter分の余白を入れている）
colissさん、ありがとうございます。
