CODEWITHSUNDEEP
htmlcssprinting
Apolo
Apolo

Reputation: 4050

CSS for printing: 210mm*297mm on A4 = overflow?

Here is a simple HTML code :

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
      .page {
        width: 200px;
        height: 500px;
        background: #DD5555;
      }

      @page {
        size: A4;
        margin: 0;
      }

      @media print {
        body {
          margin: 0;
        }
        .page {
          width: 210mm;
          height: 297mm;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">This is a test page</div>
  </body>
</html>

You can copy/paste it to check.

My problem is : When I try the print-preview in Google Chrome the "page" element overflow the first page.

This is strange because A4 dimensions are 210*297mm

Does someone know why ?

(BTW: I'm looking for some good and complete tutorial about CSS printing techniques)

Note : Google Chrome Version 41.0.2272.118 m

Upvotes: 3

Views: 6716

Answers (2)

Motla
Motla

Reputation: 1230

Try forcing setting the paper size in mm. Issue has gone for me:

@media print {  
  @page {
    size: 210mm 297mm;
    margin: 0;
  }
}

Upvotes: 2

Apolo
Apolo

Reputation: 4050

It seems to be a bug, but I can be solved by replacing height: 297mm; with height: 296.994mm;. (The difference in other browser should not be visible)

Upvotes: 2

Related Questions