2015-06-26 15 views
5

Sto cercando di implementare del codice che creerà le intestazioni e i piè di pagina su tutte le mie pagine Web ma i contenuti si sovrappongono a piè di pagina.Sommario sovrapposizione a piè di pagina durante la stampa dell'anteprima della pagina

mio foglio di stile:

<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> 

mio header, footer contenuti & div nel contenuto inserire più di linee di formato A4 a un'interruzione di pagina in anteprima di stampa.

<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> 

Grazie in anticipo.

+0

problema interessante. Il problema è che il modulo e le intestazioni/i piè di pagina occupano lo stesso spazio, e non esiste un "padding paginato" che puoi applicare al #form che potrebbe funzionare su ogni pagina. Ho provato a dare a @page un margine inferiore più ampio, e il piè di pagina un valore negativo "bottom', ma non funzionerà; roba che finirebbe nel margine della pagina non viene stampato. Quindi sono interessato alle possibili soluzioni che si presentano. –

+0

ciao amici qualcuno ha una soluzione per questo problema ?? È possibile? – mahesh

risposta

0

È preferibile modificare l'interruzione di pagina dopo il contenuto perché si modificherà il contenuto, non verranno corretti i piè di pagina e le interruzioni di pagina dopo che ogni contenuto e nuovo contenuto di pagina seguono la proprietà superiore per cadere sotto l'intestazione

ecco il codice penna 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>

Problemi correlati