代码之家 › 专栏 › 技术社区 › netdigger

HTML的打印样式仅在第一页显示良好

printing css html

netdigger · 技术社区 · 6 年前

我正在用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>

0 回复 | 直到 6 年前