Header e Footer Fixed¶

Fonte: https://cssreset.com/creating-fixed-headers-with-css/
Crie um arquivo chamado: menu.html com o código abaixo e teste rolar a página.
<html>
<head>
<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header-cont {
    width:100%;
    position:fixed;
    top:0px;
    background: #000;
}
.header {
    height:50px;
    background:#2a2f50;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    height: 2000px;
    margin: 70px auto;
}
.footer-cont {
    width:100%;
    position:fixed;
    bottom:0px;
    background: #000;
}

.footer {
    height:50px;
    background:#2a2f50;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
    color: #fff;
}


</style>
</head>
<body>
  <div class="header-cont">
      <div class="header"></div>
  </div>

  <div class="content">
   <h1>teste</h1>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
   <p>Linha...................................................................</p>
  </div>

  <div class="footer-cont">
      <div class="footer">https://cssreset.com/creating-fixed-headers-with-css/</div>
  </div>

</body>
</html>