Paged Print Test

HTML

<div id="header">
  <h1>
  Some Title
  </h1>
</div>
<div id="footer">
  <h2>Footer Content</h2>
</div>

<div id="content">
<button onClick="window.print()">
Print
</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, metus et facilisis tincidunt, ante sem dictum augue, at cursus turpis purus condimentum ligula. Curabitur sollicitudin pulvinar vulputate. Vivamus feugiat ultrices nunc, vel imperdiet ipsum fringilla eu. Mauris scelerisque lobortis ex id gravida. Pellentesque malesuada vitae purus a pulvinar. Proin efficitur faucibus ex, nec dignissim ipsum tincidunt quis. Duis eu sapien ligula.
<br><br>
Nam tincidunt risus vitae tellus ullamcorper, sit amet eleifend nibh porta. Duis in lacus eros. Suspendisse ultrices lectus vitae arcu sagittis, non congue massa dapibus. Integer non imperdiet ex. Aenean at massa molestie, mollis orci ac, sodales libero. Aliquam ac metus sed lectus maximus consectetur sollicitudin sed odio. Proin bibendum gravida aliquet. Mauris accumsan justo eget tortor cursus eleifend.
<br><br>
Ut interdum orci a diam cursus, a scelerisque magna blandit. Aliquam porttitor ante sit amet mi tristique fringilla. Quisque lectus turpis, iaculis eget vulputate vel, dignissim et mauris. Sed vitae neque sed lectus molestie interdum nec consequat felis. Etiam elementum orci erat, imperdiet hendrerit augue consequat mollis. Proin eget urna eget eros lacinia tincidunt. Vestibulum vestibulum nisi ac turpis interdum egestas. Nullam commodo mi quam, et pretium libero ultrices nec. Etiam vulputate ac nisi eget sodales. Etiam rhoncus arcu tortor, quis mattis diam rutrum non. Nullam convallis tellus dui, et lacinia neque viverra nec. Ut faucibus turpis id sapien porttitor, at bibendum sem condimentum.
<br><br>
Praesent feugiat ipsum ac neque eleifend porttitor. Curabitur vel ex id purus semper tempor. Sed consequat, ligula at dapibus sollicitudin, nibh justo vehicula justo, eget bibendum libero nisl eu diam. Suspendisse non dapibus...

CSS

body {
  margin: 5em 0;
  box-sizing: border-box;
  min-height: 100%;
}

#header, #footer {
  height: 5em 1em;
  position: fixed;
}

@media all {
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

#content {
  page-break-before: always;
}


  #header {
    position: running(header);
  }
  #footer {
    position: running(footer);
  }


@page {
  margin: 1in ,25in;
}

@page {
    @top-center { 
      content: element(header);
    }
}
@page { 
    @bottom-center { 
      content: element(footer)
    }
}