はじめに
- 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>
結果