【HTML/CSS】ホームページ著作権マークをサイト下部に固定する

概要

Footerタグを利用して中間の要素がスカスカでも常の画面の最下部にFooterが表示されるようにする方法

もし中間の要素がたくさんあった場合はページの最下部Footerが表示されるようにする

#header {
  background-color: black;
  color: white;
  height: 7vh;
  display: flex;
  align-items: center;

#main {
  min-height: 88vh;
  display: flex;
  flex-wrap: wrap;
}

#footer {
  background-color: #ccc;
  color: #333;
  height: 5vh;
  text-align: center;
}

ポイント

vh (viewport height)
ビューポートの高さに対する割合を使用する

上記CSSでは
header 7vh (7%)
main 88vh(88%)
footer 5vh (5%)
と設定して全体の表示の割合を１００％にしている
なお中途半端な数値になっているのはバランスを取るため

ちなみにmainで使用している
min-heightは領域内における最小値を指定するプロパティでmainで最低でも８８％画面を使用すると指定している