CSSで画面上下に固定のヘッダー、フッターをつくる

CSSで画面上下に固定のヘッダー、フッターをつくる


htmlおよびCSS

headerタグが画面の上固定ヘッダー、footerタグが画面の下固定フッター、div id="content"がスクロール領域となります。

<!DOCTYPE html>
<html lang="ja">
<head>
<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>
      メインコンテンツ1<br><br>メインコンテンツ2<br><br>
      メインコンテンツ3<br><br>メインコンテンツ4<br><br>
      メインコンテンツ5<br><br>メインコンテンツ6<br><br>
      メインコンテンツ7<br><br>メインコンテンツ8<br><br>
      メインコンテンツ9<br><br>メインコンテンツ10<br><br>
      メインコンテンツ11<br><br>メインコンテンツ12<br><br>
      メインコンテンツ13<br><br>メインコンテンツ14<br><br>
      メインコンテンツ15<br><br>メインコンテンツ16<br><br>
      メインコンテンツ17<br><br>メインコンテンツ18<br><br>
      メインコンテンツ19<br><br>メインコンテンツ20<br><br>
      メインコンテンツ21<br><br>メインコンテンツ22
    </p>
  </div>
  <footer>
    <p>フッターの内容<br>copyright 2020 mam</p>
  </footer>
</body>
</html>

CSSを適用したサンプル

上下にヘッダー、フッターを固定したサンプルを開く(別タブ)



Mam's WebSite