Header content is overlapping the report content

[karthiksd91]

I am trying to convert a html page that has lots of charts into pdf and adding html header and footer.
Below is the code for same :

public async Task<byte[]> GetPDFFromHTML(string reportURL, int timeout, string tempPath, string headerHtml, string footerHtml, string fileName, PageSizeDTO pageSizeDTO, OutputAreaDTO outputAreaDTO, string baseURL)
{            
    var browser = await BrowserTask.ConfigureAwait(false);
    using var page = await browser.NewPageAsync().ConfigureAwait(false);

    await page.SetViewportAsync(new ViewPortOptions
    {
        Width = (int)(pageSizeDTO.width * 96),
        Height = (int)(pageSizeDTO.height * 96)
    }).ConfigureAwait(false);

    await page.GoToAsync(reportURL, new NavigationOptions
    {
        WaitUntil = new[] { WaitUntilNavigation.DOMContentLoaded, WaitUntilNavigation.Load, WaitUntilNavigation.Networkidle0 },
        Timeout = 60000,


    }).ConfigureAwait(false);

    InjectFullHtml(page, footerHtml, isHeader: false);

    var margins = new MarginOptions
    {
        Top = $"{outputAreaDTO.y}in",
        Bottom = $"{pageSizeDTO.height - outputAreaDTO.y - outputAreaDTO.height}in",
        Left = $"{outputAreaDTO.x}in",
        Right = $"{pageSizeDTO.width - outputAreaDTO.x - outputAreaDTO.width}in"
    };

    _headerFragment = @"
        <style>
            .hdr {
              width:100%;
              font-family: Arial, sans-serif;
              font-size: 12px;
              background-color: #007bff;
              padding: 8px 16px;
            }
            .hdr-row { display: flex; }
            .hdr-cell { flex:1; font-size: 12px; }
          </style>
          <div class='hdr'>
            <div class='hdr-row'>
              <div class='hdr-cell'><b>Report Sent:</b> Jun 25, 2025 12:10 PM</div>
            </div>
            <div class='hdr-row'>
              <div class='hdr-cell'><b>Name:</b> tv, guru</div>
              <div class='hdr-cell'><b>DOB:</b> Jun 24, 2007</div>
              <div class='hdr-cell'><b>ID:</b> W1000008483</div>
            </div>
            <div class='hdr-row'>
              <div class='hdr-cell'><b>Gender:</b> Male</div>
              <div class='hdr-cell'><b>Age:</b> 18</div>
              <div class='hdr-cell'><b>Diabetes:</b> Type 2</div>
            </div>
          </div>
        ";

    using var pdfStream = await page.PdfStreamAsync(new PdfOptions
    {
        //Format = PaperFormat.A6,
        Width = $"{pageSizeDTO.width}in",
        Height = $"{pageSizeDTO.height}in",
        PrintBackground = true,
        DisplayHeaderFooter = true,
        HeaderTemplate = $@"
          <div style=""width:100% !important;"">
            {_headerFragment}
          </div>",
        FooterTemplate = $@"
          <div style=""width:100%; height:50px; margin:0; padding:0;"">
            {_footerFragment}
          </div>",

        MarginOptions = margins,
        Scale = 1,
        PreferCSSPageSize = true

    }).ConfigureAwait(false);

    using var memoryStream = new MemoryStream();
    await pdfStream.CopyToAsync(memoryStream).ConfigureAwait(false);

    return memoryStream.ToArray();

}

In the result PDF, the header content is overlapping the report content :

I tried with fixed pixel as top and bottom margin, still no luck.

I need output something like below :