css pdf Page - tête de chevauchement avec le contenu

Question

Comme on peut le voir sur l'image de mon contenu chevauche l'image d'en-tête et c'est le code que j'ai:

<style type="text/css" media="print"> 
     @page { 
      /*size:landscape;*/ 

      @top-center { 
       content: element(header); 
      } 
      @bottom-left { 
       content: element(footer); 
      } 
     } 
     div.header { 
      padding: 10px; 
      position: running(header); 
     } 
     div.footer { 
      display: block; 
      padding: 5px; 
      position: running(footer); 
     } 
     .pagenumber:before { 
      content: counter(page); 
     } 
     .pagecount:before { 
      content: counter(pages); 
     } 
    </style> 
</head> 
<div class="header"> 
    <img src="logo.png" title="logo" width="200px"/> 
</div> 
<div class="content"> 

</div> 

PS: S'il vous plaît Ne fermez pas cette question en double puisque j'ai déjà recherché toutes les questions relatives à la même chose mais la mienne semble différente que le PDF est impliqué.

Answer 1

Les en-têtes et les pieds de page sont définis dans les marges de la page.

La solution est donc d'augmenter la marge supérieure de la page, par exemple:

@page { 
     margin-top: 50mm; 
}