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

Question

我试图实现一些代码,这些代码将在我的所有网页上创建页眉和页脚,但内容在页脚上重叠.

我的样式表:

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

提前致谢.

Answer 1

您最好将 page-break-after 更改为内容，因为您要更改内容，而不是页脚页脚将被修复，并且每个内容和新页面内容之后的分页符会遵循 top 属性落到页眉下方

这是代码笔链接

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