Question

我正在使用HTML / CSS创建一些内容，并且在打印机对话框中预览时，只有第一页看起来“不错”。

第二页和后续页面的顶部都有一个初始空格，可将内容推送到两页。

有人知道这可能是什么吗？

代码如下：

只需将其放入.html文件中，然后在Chrome中打开并“打印预览”即可。

<html>
    <head>
        <meta charset="UTF-8" />
        <style>
        html{font-family: Avenir-Book;}
        h1{font-size: 16px;}
        @page {size: A3; margin: 0mm 0mm 0mm 0mm;}
        @media print {
          .month{
            page-break-after: always;
          }
        }
        .header{-webkit-print-color-adjust: exact;height: 30%;background-color: red !important;}
        .content{-webkit-print-color-adjust: exact;height: 70%;background-color: blue !important;}
        table{table-layout: fixed;height: 100%;width: 100%;}
        .header h1{color: #74cc82;position: relative;transform: translateY(-50%);-webkit-transform: translateY(-50%);top: 50%;font-size: 1200%;}
        tr{height: 40px;}
        th{font-size: 175%;}
        td{font-size: 400%;text-align: center;}
        th, td{color: #1a4567;}
        td:last-child, th:last-child{color: #74cc82;}
        </style>
    </head>
    <body>
        <div class="month" style="background-color: red;" >
            <div class="header" >
                <h1 align="center" >
                    Janvier
                </h1>
            </div>
            <div class="content" >
                <table>
                    <tr>
                        <th>L</th>
                        <th>M</th>
                        <th>M</th>
                        <th>J</th>
                        <th>V</th>
                        <th>S</th>
                        <th>D</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="month" style="background-color: red;" >
            <div class="header" >
                <h1 align="center" >
                    Janvier
                </h1>
            </div>
            <div class="content" >
                <table>
                    <tr>
                        <th>L</th>
                        <th>M</th>
                        <th>M</th>
                        <th>J</th>
                        <th>V</th>
                        <th>S</th>
                        <th>D</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

HTML的打印样式仅在首页上看起来不错

0 个答案: