読者です 読者をやめる 読者になる 読者になる

とある平凡な人の日記

自分のインプットのためのブログです。日記は「日記」カテゴリにあります。あとはおススメ書籍やメモ的用途に。

footer固定忘備録

CSS3 HTML5

凄い久しぶりですね…。

ちょっと色々ありまして、就職活動中です。

 

どうしても書きたいことができたので。

 


こちらの記事の内容をインプットしたいため。

それだけです。

 

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さん、ありがとうございます。