ヘッダー固定のレイアウトテンプレート

ポイント

• ヘッダー自体にheightをもたせることで、mainをヘッダーに隠れないように表示できる。
• body に、height: 100%;をもたせることで、web viewを100%とする。
• headerにflex-shrink: 0;をもたせることで、mainコンテンツが長い場合なども縮まないようにする
• mainにflex-grow: 1;をもたせることで、mainコンテンツが短い場合もfooterが画面下に表示されるようにする

サンプルコード