頁腳在打印頁面預覽時重疊內容

我試圖實現一些代碼，這些代碼將在我的所有網頁上創建頁眉和頁腳，但頁腳上的內容重疊。頁腳在打印頁面預覽時重疊內容

我的樣式表：

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

我的頭，內容&頁腳DIV 在內容中插入更多的則A4尺寸的防線頁打印預覽。

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

在此先感謝。

來源

2015-06-26 mahesh

有趣的問題。問題在於表單和頁眉/頁腳佔據相同的空間，並且沒有可以應用於可在每個頁面上工作的#form的「分頁填充」。我試着給@page一個更大的底部邊距，並且頁腳是一個負的「底部」值，但這不起作用;不會打印最終在頁邊距內的東西。所以我對可能出現的解決方案感興趣。 –

你好朋友有誰有解決這個問題的？有可能的？ – mahesh

您最好將頁面拆分後的內容更改爲內容，因爲您要更改內容而不是頁腳頁腳將被修復，並且在每個內容和新頁面內容跟隨頂部屬性落在頁眉之下

這裏是代碼筆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>

來源

2017-08-22 13:13:10

頁腳在打印頁面預覽時重疊內容

回答

相關問題