页脚在打印页面预览时重叠内容

我试图实现一些代码，这些代码将在我的所有网页上创建页眉和页脚，但页脚上的内容重叠。页脚在打印页面预览时重叠内容

我的样式表：

<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

页脚在打印页面预览时重叠内容

回答

相关问题