1

我正在为客户编写发票 web 应用程序，并且我正在尝试更新页面布局，因此如果某个部分中的文本溢出，那么打印的页面将看起来不错，而不是像现在这样可怕。

如果文本溢出第一页，则打印的每一页都有页眉/页脚（这些包含客户信息和发票上的价格）。

问题是一切看起来都很好，但是每个 div 中的文本都隐藏在页眉和页脚下，我该如何解决这个问题？

在此处输入图像描述

如您所见，Div 隐藏在页眉和页脚下，我尝试应用边距/填充，但它只将其放在第一页的顶部和最后一页的底部：/

这只是一个测试页面，因为我正试图弄清楚一切的外观。

<style>
    .element { page-break-inside: avoid; page-break-after: auto; border:1px solid black; width:100%;height:330px; }

    .footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      background: gray;
    }

    .header {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      background: gray;
    }


    @media print
    {
      .footer {
        position: fixed;
        bottom: 10px;
        left: 0px;
        width: 100%;
        background: gray;
      }

      .header {
        position: fixed;
        top: 10px;
        left: 0px;
        width: 100%;
        background: gray;
      }

    }

    </style>

    <div class='element'>1</div>
    <div class='element'>2</div>
    <div class='element'>3</div>
    <div class='element'>4</div>
    <div class='element'>5</div>
    <div class='element'>6</div>
      <div class="footer">
        <table><tr>
          <td>one</td>
          <td>one test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>two</td>
          <td>two test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>three</td>
          <td>three test</td>
          <td>one test</td>
        </tr>
      </table>
    </div>

    <div class="header">
        <table><tr>
          <td>one</td>
          <td>one test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>two</td>
          <td>two test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>three</td>
          <td>three test</td>
          <td>one test</td>
        </tr>
      </table>
    </div>

任何帮助都会得到极大的帮助:)。

4

0 回答 0