Question

我尝试使用html / css构建可打印的发票格式：

我想要实现的目标 1.重复所有页面上的标题
2.文本页脚粘到所有页面

问题:)
1.如果标题太大（高度），它只会出现在第一页，我做了很多研究，但我找不到任何相关内容。有没有人设法在每一页上重复它？

2.文本页脚与发票表重叠。我试图给.page容器填充，将body添加到html，尝试更改页面的边距并将其放在外面，没有任何效果。

编辑模式 https://codepen.io/g_emanuel/pen/VQdeyX/

调试模式，因此可以使用CTRL + P https://s.codepen.io/g_emanuel/debug/VQdeyX/jVMpogGvQGyk

谢谢！

<html>
<head>
    <meta name="google" value="notranslate">
</head>
<body>
  <div class="page">
    <table class="invoice">
        <thead>
            <tr>
                <th>Invoice Header</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
            <tr>
                <td>Invoice body item</td>
            </tr>
        </tbody>

        <tfoot>
      </tfoot>
     </table>

    <div class="disclaymer">
        lorem lipsum
    </div>
  </body>

</html>

Answer 1

在你的css中尝试这段代码

.disclaymer {
  position: relative;
  display: block;
  width: 100%;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  height: 100px;
}

可打印的CSS / HTML发票

1 个答案: