CSSヘッダー＆フッターを固定化する - フリーランス　技術調査ブログ

　はじめに

normalizeを利用してヘッダー＆フッターが常に上下に固定化されているページを作成する necolas.github.io

CSS

stylesheetは下記のように記述する

html,
body {
  margin: 0; /* 余白の削除 */
  padding: 0; /* 余白の削除 */
  width: 100%;
  height: 100%;
}

.header__div {
  position: fixed; /* 固定 */
  top: 0; /* 一番上に表示 */
  width: 100%; /* 中央に表示 */
  border: solid red;
  background-color: gray;
}

.container__div {
  min-height: 90vh;
  width: 100%;
  overflow-x: hidden !important;
  border: solid rebeccapurple;
  overflow: auto;
}

.footer__div {
  position: fixed; /* 固定 */
  bottom: 0; /* 一番下に表示 */
  width: 100%; /* 中央に表示 */
  border: solid blue;
  background-color: gray;
}

HTML

<template>
  <div>
    <div class="header__div">
      ヘッダー
    </div>
    <div class="container__div">
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>
        テストテストテストテストテストテストテストテストテストテストテストテスト<br>

    </div>
    <div class="footer__div">
      フッター
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

結果

f:id:PX-WING:20210107082819p:plain