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

Posted 2023-03-06

【中文标题】打印页面预览时，页脚内容重叠

【英文标题】：Contents overlap on footer while print page preview

【发布时间】：2015-09-13 02:00:01

【问题描述】：

我正在尝试实现一些代码，这些代码将在我的所有网页上创建页眉和页脚，但页脚上的内容重叠。

我的样式表：

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

提前致谢。

【问题讨论】：

有趣的问题。问题是表单和页眉/页脚占用相同的空间，并且没有“分页填充”可以应用于适用于每个页面的#form。我尝试给@page 一个更大的底边距，给页脚一个负的bottom 值，但这不起作用；不会打印最终会出现在页边距中的内容。所以我对可能出现的解决方案很感兴趣。

你好朋友有没有解决这个问题的方法？？有可能吗？

【参考方案1】：

您最好将 page-break-after 更改为 content 因为您要更改内容而不是页脚 页脚将被固定，并且每个内容和新页面内容后的分页符都遵循 top 属性以低于页眉

这里是代码笔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>