CSS Print layout is adding an extra page

Related searches

I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:

        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */

        height: 296mm;
        border: 1px solid black;
        margin: 0px;  /* this affects the margin on the content before sending to printer */

.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/

.A4_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 44mm;
    height: 210mm;
    width: 165mm;

I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.

Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.

Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.

how to avoid extra blank page at end while printing?, so the last print element will not get the extra page break. First of all, you can add border to all elements to see what causes a new page to be appended If you just wanna use CSS and wanna avoid page break then use size for flex items, providing a more reasonable default than 0 for other layouts. A print style sheet can be added to the HTML <head> after the standard style sheet: <link rel="stylesheet" href="main.css" /> <link rel="stylesheet" media="print" href="print.css" /> The print.css

Really late answer, but I think my contribute can help someone with the same issue I came across making use of CSS to setup a page for printing:

creating a dynamic html content and appending it to the body element with the purpose to print only such content, I realize that only Chrome (version 46) and Opera (version 32) creates an extra blank page at beginning while printing, this only happened when the content height was greater than the page height. The solution provided by @mewiki solved me a 2-days-of-research-and-test problem.

Indeed Chrome and Opera seemed to have default margins and setting the following rule:

body {
    margin: 0 0 0 0;

solved the frustrating behavior which was not encountered in other browsers.

how to avoid extra blank page at end while printing? - css - html, So I added this in my print CSS rules: #header, #menu, #sidebar{ height:1px; display:none;} to target specific divs by their ids which contain tall page layout� The browser owner can also set their own CSS to override whatever is in the page - for example if they wanted all web pages to use Comic Sans font instead of whatever the page owner specified. The

Old question, but for people with the same problem here is my solution that fixed it for me.

I found out that the margin-bottom of the body must be set explicitly to zero (Chrome and Safari seem to have a default margin).

    margin: 0px 0px 0px 0px; 

div.page {
  margin: 10px 10px 10px 10px; 
  page-break-before: none;
  page-break-after: none;
  page-break-inside: avoid;

For each to be printed page start with a <div class="page"> and set the page margins there so the page looks nice.

How to avoid the extra blank pages in print and print preview, May 23, 2019. Tags: reportviewer, layout, blankpage, extra-blankpage extra pages. When it uses greater than 20, it will add extra pages. No problem - remember it's best to keep all html together in your root, all CSS in a css file, and all pictures in an img file :) In order to make your pages have the same layout, such as a navigation and footer, you will want to copy the parts of the HTML code that should remain the same.

For anyone dealing with multiple pages. I added each page content in sections then used this:

section {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

How to Create Printer-friendly Pages with CSS, Craig Buckler reviews the art of creating printer-friendly web pages with CSS, A print style sheet can be added to the HTML <head> after the standard style sheet: Consider using CSS columns in print layouts. There's no need to set media queries; additional columns will be added on wider paper. Print CSS. Some common things you might want to do when printing is to hide some parts of the document, maybe the footer, something in the header, the sidebar. Maybe you want to use a different font for printing, which is totally legit. If you have a large CSS for print, you’d better use a separate file for it.

I had a similar problem where the introduction of a page break caused a blank page.

I don't have enough reputation to comment on wiredolphin's post, but using that suggestion, the following worked for me

html, body {
  margin: 0 0 0 0;
  height: 99% !important;

.page {
  height: 100vh;
  page-break-after: always;

I know this doesn't answer the original poster's question, but it's pretty old, and this might help someone.

Also, thanks wiredolphin! You led me in the right direction.

A Guide To The State Of Print Stylesheets In 2018 — Smashing , In this case, I am talking about printing pages directly from the browser. Once we have decided to include print styles in our CSS, we need to add them to our to the layout we also include those changes in the print version. One method of doing this is to link an additional stylesheet by using the <link>� Most of the web pages do not have a Print CSS, therefore you can see that the alignment, layout, colour and font are all in their default. So how does it look like after adding the Print CSS? Well, styling Print CSS is the same as styling a normal StyleSheet, you can make any changes you prefer.

The Differences Between CSS For The Web And For Print CSS. The biggest difference, and conceptual shift, is that printed documents refer to a page model that is of a fixed size. Whereas on the web we are constantly reminded that we have no idea of the size of the viewport, in print the fixed size of each page has a bearing on everything that we do.

Read more about it in our CSS Media Queries chapter. Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above). To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Print an external page without opening it. If you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: HTMLIFrameElement), automatically removing it after the user prints its contents. The following is a possible example which will print a file named externalPage.html:

  • I've reduced height all the way down to 260mm, and although I can clearly see all divs end way before the bottom of the page, I'm still getting an extra page. Thanks for the fast reply
  • As an update, I put a 1 pixel white border around .print_A4 and it fixed it. It's pretty ghetto and I have no idea why/how it works but that seemed to do it :)
  • Also had this same issue, and the border worked for me. However I added "border: 1px solid transparent" so that a borer line won't print under any circumstances.
  • 'none' is not in the allowed values of "page-break-after" and "page-break-before" you should use auto