0

I have an html document which should be printed. But the print page should have a border for each page, also there should be a header and footer repeating on each page. Is it possible using html and css?

@media print {
  header {
    display: block;
    color: red;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
  }
  footer {
    position: fixed;
    bottom: 0;
    display: block;
    color: red;
    width: 100%;
    height: 30px;
    margin-top: 20px;
  }
  #wrapper {
    border: 1px solid #000;
    padding: 30px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
  }
}
<body>
  <div id="wrapper">
    <header>
      <p>This is a header</p>
    </header>
    <section class="content">
      <p> Lorem </p>
    </section>
    <footer>
      <p>This is a footer</p>
    </footer>
  </div>
</body>
YetAnotherBot
  • 1,584
  • 2
  • 16
  • 26
luck
  • 13
  • 4
  • What did you you try so far? Can you provide an [mcve]? – Oram Nov 29 '18 at 09:09
  • the problem is the border is not getting reflected to each page..also the header and footer is getting overlapped with the contents in the 2nd page – luck Nov 29 '18 at 09:16
  • you should look into something like JavaScript (or my preferred choice: PHP) to handle include – treyBake Nov 29 '18 at 09:40

0 Answers0