2

Is it possible to print header and footer in all pages of a html document using css without overlapping the header and content. I have tried "position:fixed" but with that the header overlaps with the body content. When I tried to set "top:margin" to the body of content it get applied only to the first page.

Code Sample

<html>
      <head>                 
      <style>
     div#myheader {
   position: fixed; top: 0; left: 0; width: 100%; height: 2em;
   padding-bottom: 3em;
   margin-bottom: 10px;
   }


@media screen {
 div#myheader {
   display: none !important;
    }
   div#mainContent {
    margin-top: 0;
     }
  }

@media print {
    div#myheader {
 display: block;
   }
    div#mainContent {
   margin-top: 0em;

    }
  }
 </style> 
 </head>
 <body>
 <div id="myheader" class="header" style="display: block;">
  Header
 </div>
 <div id="mainContent">
 // Have more than 150 lines here
 </div>
 </body>
 </html>

Note: Please don't mark the question as duplicate. I saw similar questions in Stack Overflow and other blogs. But nothing helped me. I have been struck with this for nearly a month. Please comment your solutions.

Aruna
  • 176
  • 11
  • What do you mean by "pages"? – Evan Knowles Sep 11 '17 at 10:10
  • You might need to elaborate on your question to explain what is actually wrong, it's hard to tell.... – Stuart Sep 11 '17 at 10:14
  • @Evan my html body contains more lines of code. So while printing the html body will be automatically split into pages. – Aruna Sep 11 '17 at 10:18
  • If you don’t want us to mark this as a duplicate, then at least have the basic smarts to tell us _which_ other questions/resources did not help you so far. – CBroe Sep 11 '17 at 10:19
  • Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) – Evan Knowles Sep 11 '17 at 10:25
  • @CBroe, In all the pages its said that by setting the "margin:top" style the overlapping can be corrected. But the "margin" property when given for whole page works well. When you try to set the margin property to a particular div, it will be applied only in the first page, the rest of pages won't have the margin effect. – Aruna Sep 11 '17 at 10:31
  • @Ewan, Your link don't have answer to my question. If you don't believe my words, please apply those styles in my code and check. – Aruna Sep 11 '17 at 10:34

1 Answers1

0

I think I understand what you're saying, you want your header to be every printed page but it is currently overlapping the content when you use position: fixed?

If so this is because the position: fixes property removes an element from the document flow, your main content is still in the document flow but will not move out of the way of your fixed heading but it's not in the flow to push it. Your margin-bottom on the header will have no effect.

Do you have a rough height your header is going to be?

You can simply use position fixed but push your main content down via a margin to simulate the header actually being a part of the document flow like so:

 @media print {
 div#myheader {
     display: block;
 }
 div#mainContent {
   margin-top: 200px;
 }
}

Here you're having your content pushed down whatever size the header is. You could do this with some JS if the header has a dynamic height.

Felipe Warrener-Iglesias
  • 679
  • 4
  • 19
  • Finally got one who understand my problem. What you said is my present scenario. But the solution you gave haven't worked for me. See my previous comments. I have explained about the "margin" property. – Aruna Sep 11 '17 at 11:01
  • 1
    How about @media print { div:nth-child(1){ margin-bottom: 200px; } } – Felipe Warrener-Iglesias Sep 11 '17 at 11:18
  • Felipe, Can you explain how your code works. Actually your code is producing more spaces between codes. When I try to reduce the margin value, the header is over lapping with the body content. – Aruna Sep 11 '17 at 12:33
  • Struggling to understand what you're getting at now. – Felipe Warrener-Iglesias Sep 11 '17 at 12:38
  • When I gave "margin-bottom:20px" , the body contents are overlapping with the image. So when I tried with "margin-bottom:200px" I am getting more blank space between my body elements. – Aruna Sep 12 '17 at 04:26