htmlcssnode.jspuppeteer

Styling issue with puppeteer

Can someone help me with a styling issue, it's driving me crazy. I use puppeteer within nodejs and it works fine until I started styling.

I noticed that styling has trouble with dynamic content via js. When I apply 100% in the with and height with static content in an html page, the behavior is diffrent then when elements(identical) are added via js.

Example I have the following index.html and css style

index.html

.page { 
    padding: 0px;
    font-size: 16px;
    line-height: 24px;
    background-size: cover;
    page-break-before: always;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

u/media print {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
}

This is the end result... enter image description here

So the height of the div is equal to the content which is incorrect. It should be 100% like the first 2 pages. enter image description here

Doe somebody know how I can fix this?

Solution

  • Make sure html, body, and all parent containers of .page have height: 100%.

    html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

    Also you can fix it u/media print {

    @media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

    If your .page elements are meant to be full-page, consider using min-height: 100vh instead of 100%:

    .page {
  min-height: 100vh;
}