htmlおよびCSS
headerタグが画面の上固定ヘッダー、footerタグが画面の下固定フッター、div id="content"がスクロール領域となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=4,user-scalable=yes">
<meta charset="UTF-8">
<style>
html,body{
height:100%;
margin:0;
padding:0;
font-size:12pt;
}
header{
position:fixed;
top: 0px;
width: 100%;
height: auto;
background:#333;
color:#fff;
margin:0px;
padding:0px;
text-align:center;
}
div#content{
/* ヘッダーの高さに応じて適宜調整してください */
padding-top:80px;
/* フッターの高さに応じて適宜調整してください */
padding-bottom:80px;
}
footer{
position:fixed;
bottom:0px;
width:100%;
height:auto;
background:#333;
color:#fff;
margih:20px;
text-align:center;
}
</style>
</head>
<body>
<header>
ヘッダー
</header>
<div id="content">
<h3>スクロールしても、上下にヘッダー、フッターは固定表示されます。</h3>
<p>
メインコンテンツ１<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>メインコンテンツ２２
</p>
</div>
<footer>
<p>フッターの内容<br>copyright 2020 mam</p>
</footer>
</body>
</html>