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>

我的标题，内容＆amp;页脚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

您最好将分页符更改为内容，因为您要更改内容而不是页脚符号将被修复，并且每个内容和新页面内容跟随top属性后面的分页符落在标题之下

这是代码笔link

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: