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

ポイント

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

  • mainにflex-grow: 1;をもたせることで、mainコンテンツが短い場合もfooterが画面下に表示されるようにする

サンプルコード

タイトルとURLをコピーしました