在Gotenberg PDF PHP库上的新页面上避免Main内容与页眉和页脚重叠

我已经写了一个代码打印html在pdf使用Gotenberg version 7，pdf库在PHP中。
配置设置Gotenberg：

$chromium = Gotenberg::chromium(config('gotenberg.api.host'))
            ->printBackground()
            ->margins(0, 0, 0, 0)
            ->paperSize('8.27', '11.7'); // A4 dimensions in inches

字符串
我没有设置页眉和页脚作为一个单独的HTML文件，因为我有完整的身体和default-background.jpg包含页眉页脚部分与背景图像在它。主要内容是重叠的页眉和页脚在所有页面上。如何让它开始后，页眉和页脚前休息每一页。
有没有人遇到过类似的问题？有没有人能提供相关的解决方案？

的
我的HTML在https://jsfiddle.net/solankiavnee/yapnjqds/上可用

<html lang="en">
<head>
    <title>Testing</title>
</head>
<body>
    <div class="background"></div>
    
            <div class='watermark-container'>
    <div style="position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.1;
        font-size: 130px;
        font-family: sans-serif;
        transform: rotate(-45deg);
        color: #000000;"
    >
    </div>
</div>
        <header>
        <div>This is my header</div>
    </header>
    <main>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
        <div>This is my Body</div>
    </main>
    <footer>
        <div>This is my footer</div>
    </footer>
</body>
</html>

型
CSS是：

@page {
        margin: 0;
    }

    html {
        height: 1123px;
        width: 794px;
        font-family: DejaVu Sans, Arial, sans-serif;
        font-size: 11pt;
        letter-spacing: -0.2pt;
    }

    body {
        margin: 0;
        padding: 0;
    }

    table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }

    table tr td, table tr th {
        margin: 0;
        padding: 0;
    }

    p {
        margin: 0 0 9px 0;
        padding: 0;
    }

    hr {
        margin: 0;
        padding: 0;
    }

    h1, h2, h3, h4, h5 {
        margin: 0;
    }

    header {
        position: fixed;
        top: 0;
        width: 100%;
        color: #FFFFFF;
    }

    footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 36px;
        color: #FFFFFF;
    }

    footer > table {
        height: 100%;
        color: #FFFFFF;
    }

    footer table td{
        color: #FFFFFF;
    }

    footer.pre-footer {
        bottom: -8;
        color: #000000;
    }

    main {
        margin: 54px 18px;
        page-break-inside: auto !important;
    }

    div.background {
        z-index: -1;
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 100% 100%;
        background-image: url('default-background.jpg);
    }

    h1 {
        letter-spacing: 1px;
        margin: 0;
        padding: 0;
    }

/**
     * Spacing
     */
    .pa-3 { padding: 18px; } .pa-2 { padding: 9px; } .pa-1 { padding: 4.5px; } .pa-0 { padding: 0; }
    .px-3 { padding-left: 18px; padding-right: 18px; } .px-2 { padding-left: 9px; padding-right: 9px; } .px-1 { padding-left: 4.5px; padding-right: 4.5px; } .px-0 { padding-left: 0; padding-right: 0; }
    .py-3 { padding-top: 18px; padding-bottom: 18px; } .py-2 { padding-top: 9px; padding-bottom: 9px; } .py-1 { padding-top: 4.5px; padding-bottom: 4.5px; } .py-0 { padding-top: 0; padding-bottom: 0; }
    .pt-3 { padding-top: 18px; } .pt-2 { padding-top: 9px; } .pt-1 { padding-top: 4.5px; } .pt-0 { padding-top: 0; }
    .pb-4 { padding-bottom: 36px; } .pb-3 { padding-bottom: 18px; } .pb-2 { padding-bottom: 9px; } .pb-1 { padding-bottom: 4.5px; } .pb-0 { padding-bottom: 0; }
    .pl-3 { padding-left: 18px; } .pl-2 { padding-left: 9px; } .pl-1 { padding-left: 4.5px; } .pl-0 { padding-left: 0; }
    .pr-3 { padding-right: 18px; } .pr-2 { padding-right: 9px; } .pr-1 { padding-right: 4.5px; } .pr-0 { padding-right: 0; }

    .ma-3 { margin: 18px; } .ma-2 { margin: 9px; } .ma-1 { margin: 4.5px; } .ma-0 { margin: 0; }
    .mx-3 { margin-left: 18px; margin-right: 18px; } .mx-2 { margin-left: 9px; margin-right: 9px; } .mx-1 { margin-left: 4.5px; margin-right: 4.5px; } .mx-0 { margin-left: 0; margin-right: 0; }
    .my-3 { margin-top: 18px; margin-bottom: 18px; } .my-2 { margin-top: 9px; margin-bottom: 9px; } .my-1 { margin-top: 4.5px; margin-bottom: 4.5px; } .my-0 { margin-top: 0; margin-bottom: 0; }
    .mt-3 { margin-top: 18px; } .mt-2 { margin-top: 9px; } .mt-1 { margin-top: 4.5px; } .mt-0 { margin-top: 0; }
    .mb-3 { margin-bottom: 18px; } .mb-2 { margin-bottom: 9px; } .mb-1 { margin-bottom: 4.5px; } .mb-0 { margin-bottom: 0; }
    .ml-3 { margin-left: 18px; } .ml-2 { margin-left: 9px; } .ml-1 { margin-left: 4.5px; } .ml-0 { margin-left: 0; }
    .mr-3 { margin-right: 18px; } .mr-2 { margin-right: 9px; } .mr-1 { margin-right: 4.5px; } .mr-0 { margin-right: 0; }

    /**
     * Colors
     */
    .green { color: green; }
    .red { color: red; }
    .orange { color: orange; }

    .muted { color: #333333; }

    /**
     * Align
     */
    .text-left { text-align: left !important; }
    .text-center { text-align: center !important; }
    .text-right { text-align: right !important; }

    .vertical-align-top { vertical-align: top; }
    .vertical-align-middle { vertical-align: middle; }

    /**
     * Font
     */
    .text-lg { font-size: 120%; }
    .text-md { font-size: 100%; }
    .text-sm { font-size: 80%; }
    .text-xs { font-size: 60%; }

    .font-weight-bold { font-weight: bold; }
    .font-weight-normal { font-weight: normal; }
    .font-style-italic { font-style: italic; }

    /**
     * Borders
     */
    .border-b, tr.border-b td { border-bottom: 1px solid #333333; }
    .border-t, tr.border-t td { border-top: 1px solid #333333; }

    .border-light, tr.border-light td { border-color: #CCCCCC; }

    /**
     * Sizes
     */
    .w-25 { width: 25%; }
    .w-50 { width: 50%; }
    .w-65 { width: 65%; }

    /**
     * Tables
     */
    table.table-alternating-row-colors tbody tr:nth-child(odd) {
        background: #DDDDDD;
    }

    .tr-spacing-xs > th, .tr-spacing-xs > td {
        padding-left: 4.5;
        padding-right: 4.5;
    }
    .tr-spacing-xs > th:first-of-type, .tr-spacing-xs > td:first-of-type {
        padding-left: 0;
        padding-right: 4.5;
    }
    .tr-spacing-xs > th:last-of-type, .tr-spacing-xs > td:last-of-type {
        padding-left: 4.5;
        padding-right: 0;
    }

    .tr-spacing-sm > th, .tr-spacing-sm > td {
        padding-left: 9;
        padding-right: 9;
    }
    .tr-spacing-sm > th:first-of-type, .tr-spacing-sm > td:first-of-type {
        padding-left: 0;
        padding-right: 9;
    }
    .tr-spacing-sm > th:last-of-type, .tr-spacing-sm > td:last-of-type {
        padding-left: 9;
        padding-right: 0;
    }

    /**
     * The below classes only affect the layout when each <th> element has one of the classes below.
     */
    .th-shrink {
        width: 1%;
        white-space: nowrap;
    }
    .th-grow {
        width: 100%;
    }

    /**
     * Text
     */
    .text-no-wrap {
        white-space: nowrap;
    }

    .text-white { color: #ffff; }
    .text-grey { color: #333; }
    .text-lightgrey { color: #777; }

    /**
     * Float
     */
    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }

    /**
     * Page breaks
     */
    .no-break {
        page-break-inside: avoid;
        page-break-after: avoid;
    }

    .page-break {
        page-break-after: always;
    }

        div.concept {
            z-index: 0;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        div.concept > span {
            -webkit-transform: rotate(-60deg);
            font-size: 140pt;
            opacity: .1;
        }

        img.logo {
            margin: 0;
            max-width: 200px;
            max-height: 52px;
        }

        img.associationLogo {
            margin: 0;
            max-width: 200px;
            max-height: 38px;
        }

型

在Gotenberg PDF PHP库上的新页面上避免Main内容与页眉和页脚重叠

1条答案

相关问题

热门标签

最新问答