css pdf page - header overlapping with content

问题

As we can see from the image my content overlaps with the header image and this is the code I have:

    <style type="text/css" media="print">
        @page {
            /*size:landscape;*/

            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }
        }
        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
    </style>
</head>
<div class="header">
    <img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">

</div>

P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.

回答1:

Headers and footers are established within the page margins.

So the solution is to increase the page top margin, for example:

@page {
        margin-top: 50mm; 
}

回答2:

Method to implement header footer properly in PDF

After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.

Please add these style to report container (the div in which report is rendered).

<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>

// Div properties may differ

Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).

<div style="width: 100%;">
    <table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
        <thead class="page-break-before">
            <tr>
                <td>
                    <div style="height: 80px;"></div> // space for the respective header
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div> Your Data Goes Here........</div>
                </td>
            </tr>
        </tbody>
        <tfoot class="show-in-print page-break-after">
            <tr>
                <td>
                    <div style="height: 130px;"></div> // space for the respective footer
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Sample Header and footer

<div class="page-break-before">
    <div>A long header content...</div>
</div>

<div class=" page-break-after">
    <p> A long footer content...</p>
</div>

来源：https://stackoverflow.com/questions/31463424/css-pdf-page-header-overlapping-with-content