Inhaltsüberlappung in der Fußzeile während der Druckseitenvorschau

Ich versuche, Code zu implementieren, der die Kopf- und Fußzeilen auf allen meinen Webseiten erstellt, aber den Inhalt in der Fußzeile überlappt.Inhaltsüberlappung in der Fußzeile während der Druckseitenvorschau

Mein Sheet:

<style> 

    @media print 
    { 

     #Header 
     { 
      display: block; 
      position: fixed; 
      top: 0pt; 
      left: 0pt; 
      right: 0pt; 
      font-size: 200%; 
     } 

     #Footer 
     { 
      display: block; 
      position: fixed; 
      bottom: 0pt; 
      left: 0pt; 
      right: 0pt; 
      font-size: 200%; 
      page-break-before: always; 
     } 

     #form 
     { 
      display: block; 
      position: relative; 
      top: 0.5in; 
      left: 0pt; 
      bottom: 0.5in; 
      right: 0pt; 
     } 

    } 
</style>

Mein Kopfzeile, Inhalt & Fußzeile div in Inhalt einfügen mehr als A4-Format Linien Seite in Druckvorschau zu brechen.

<div class="wordcontent"> 
    <div class="" style="height: 0.5in;" contenteditable="true" id="Header"> 
     HEADER 
    </div> 
    <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> 
    content more then 500 lines 
    </div> 
    <div class="" style="height: 0.5in; margin-top: 5px;" contenteditable="true" id="Footer"> 
     FOOTER 
    </div> 
</div>

Vielen Dank im Voraus.

Quelle

2015-06-26 mahesh

Interessante Problem. Das Problem besteht darin, dass das Formular und die Kopf-/Fußzeilen den gleichen Platz einnehmen, und es gibt kein "paged Padding", das Sie auf das #Formular anwenden können, das auf jeder Seite funktionieren würde. Ich habe versucht, der @page einen größeren unteren Rand und die Fußzeile einen negativen "bottom" Wert zu geben, aber das wird nicht funktionieren; Zeug, das im Seitenrand enden würde, wird nicht gedruckt. Daher bin ich an möglichen Lösungen interessiert, die auftauchen. –

Hallo Freunde, jemand hat eine Lösung für dieses Problem? Es ist möglich? – mahesh

Sie ändern, um besser die page-break-after zum Inhalt, weil der Inhalt nicht der Fußzeile Fußzeile behoben werden und nach jedem Inhalt und neue Seiteninhalt Seitenumbrüche die Top-Eigenschaft folgen, werden sich ändern, unter dem Header fallen

hier ist der Code Stift link

@media print 
 
    { 
 

 
     #Header 
 
     { 
 
      display: block; 
 
      position: fixed; 
 
      top: 0pt; 
 
      left: 0pt; 
 
      right: 0pt; 
 
      font-size: 200%; 
 
     } 
 

 
     #Footer 
 
     { 
 
      display: block; 
 
      position: fixed; 
 
      bottom: 0pt; 
 
      left: 0pt; 
 
      right: 0pt; 
 
      font-size: 200%; 
 
      
 
     } 
 

 
     #form 
 
     { 
 
      display: block; 
 
      position: relative; 
 
      top: 0.5in; 
 
      left: 0pt; 
 
      bottom: 0.5in; 
 
      right: 0pt; 
 
      page-break-after: always; 
 
     } 
 

 
    }

<div class="wordcontent"> 
 
    <div class="" style="height: 0.5in;" contenteditable="true" id="Header"> 
 
     HEADER 
 
    </div> 
 
    <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> 
 
    content more then 500 lines 
 
    </div> 
 
    <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> 
 
    content more then 500 lines 
 
    </div> 
 
    <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> 
 
    content more then 500 lines 
 
    </div> 
 
    <div class="" style="height: 0.5in; margin-top: 5px;" contenteditable="true" id="Footer"> 
 
     FOOTER 
 
    </div> 
 
</div>

Quelle

2017-08-22 13:13:10

Inhaltsüberlappung in der Fußzeile während der Druckseitenvorschau

Antwort

Verwandte Themen