How to set a defaul header and footer without breaking the content

[juniorvilas]

<div className="display-only-in-print"> <header style={{ width: '100%', position: 'fixed', top: 0, left: 0, height: '80px', justifyContent: 'center', alignItems: 'center', display: 'flex', zIndex: 1000, }} className="print-header" > <img src={brandConfig.headerImage} alt="Imagem Header" /> </header> <div className="print-content"> <div style={{ display: 'flex', alignItems: 'center', padding: '0', }} > <img src={pictureUrl} alt={Logo}
height={64}
style={{ marginRight: '15px' }}
/>
<Typography.Title level={5} style={{ margin: 0 }}>
{name}
</Typography.Title>

<Typography.Title level={5}>
Serviço:
<Typography.Text
style={{ marginLeft: '5px' }}
>
{workflow.metadata.name}
</Typography.Text>
</Typography.Title>
<Typography.Title level={5}>
Protocolo:
<Typography.Text
code
style={{ marginLeft: '5px' }}
>
{(protocol)}
</Typography.Text>
</Typography.Title>

                    </div>
                    <Divider />
                    {reviewState?.map(({ id, label, data }) => (
                        <Descriptions
                            key={id}
                            title={label}
                            bordered
                            size="small"
                            column={1}
                            labelStyle={{ width: '40%' }}
                            style={{
                                pageBreakInside: 'avoid',
                            }}
                        >
                            {data?.map(
                                ({
                                    field,
                                    question,
                                    value,
                                    answerType,
                                }) => (
                                    <Descriptions.Item
                                        key={`${id}_${field}`}
                                        label={question}
                                        style={{ pageBreakInside: 'avoid' }}
                                    >
                                        {renderByType(answerType, value)}
                                    </Descriptions.Item>
                                )
                            )}
                        </Descriptions>
                    ))}
                </div>
                <footer
                    style={{
                        width: '100%',
                        position: 'fixed',
                        bottom: 0,
                        left: 0,
                        height: '80px',
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        zIndex: 1000,
                    }}
                    className="print-footer"
                >
                    <img
                        src={brandConfig.footerImage}
                        alt="Imagem Rodapé"
                    />
                </footer>`
                
                
                my css
                
                
                `  .print-content {
    page-break-inside: avoid;
    margin-top: 50px;
}
.print-content > * {
    page-break-inside: avoid !important;
}
.display-only-in-print {
    display: none;
}

@media print {
    @page {
        margin: 8mm;
    }

    @page:first {
        margin-top: 0;
    }

    .display-only-in-print {
        display: block !important;
        visibility: visible !important;
        page-break-after: auto;
        padding: 50px;

        .print-text {
            display: flex;
            justify-content: space-between;
            align-items: start;
        }
    }
}`

[juniorvilas]

In the image you can see that the content that didn't fit on the first page is below the header

[anil-teamin]

/*this is for printing */
@media print {
@page {
size: A4;
margin: 4mm;
}
body {
margin: 0;
}
.print-container table {
width: 100%;
/margin:4mm;/
}
.header-placeholder{
height: 55mm;
}
.footer-placeholder{
height: 40mm;
}
.header, .footer {
position: fixed;
width: 100%;
text-align: center;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
}

. . .

// header content

[anil-teamin]

bro,
https://stackoverflow.com/questions/79270966/requirement-to-print-the-tr-with-classname-onlyinlastpage-in-the-last-page-and
check this link, your issue may be solved, i raised this question, i had little more requirement.