how to avoid extra blank page at end while printing

Question

I m using a CSS property   If I use page-break-after  always     It prints an extra blank page before  If I use page-break-before  always     It prints an extra blank page after  How to avoid this    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Insert title here lt  title gt   lt style type  text css  gt   print      page-break-after  always      lt  style gt   lt script type  text javascript  gt  window print     lt  script gt   lt  head gt   lt body gt   lt div class  print  gt fd lt  div gt   lt div class  print  gt fdfd lt  div gt   lt  body gt   lt  html gt

User · Answer

I tryed all solutions  this works for me    lt style gt       page           size  A4          margin  1cm              print           display  none              media print           div fix-break-print-page               page-break-inside  avoid                      print               display  block                        print last-child           page-break-after  auto         lt  style gt

User · Answer

If you just wanna use CSS and wanna avoid page break then use    print      page-break-after  avoid       Take a look at paged media  You can use scripting equivalents for pageBreakBefore and pageBreakAfter dynamically assign their values  For example  instead of forcing custom page breaks on your visitors  you can create a script to make this optional  Here I ll create a checkbox that toggles between slicing the page at the headers  h2  and at the printer s own discretion  default     lt form name  myform  gt   lt input type  checkbox  name  mybox  onClick  breakeveryheader    gt   lt  form gt    lt script type  text javascript  gt   function breakeveryheader     var thestyle  document forms myform mybox checked    always     auto   for  i 0  i lt document getElementsByTagName  H2   length  i     document getElementsByTagName  H2   i  style pageBreakBefore thestyle        Click here for an example that uses this  You can substitute H2 inside the script with another tag such a P or DIV    http   www javascriptkit com dhtmltutors pagebreak shtml

User · Answer

Put the stuff you need on a page in a div and use page-break-inside avoid on that div  Your div will stay on one page and go onto a second or third page if needed  but the next div  should it have to do a page break  should start on the next page

User · Answer

Seems there s a lot of possible causes  with the likely theme being that the body tag ends up with a height that is considered too large for w e reason   My cause  min-height  100  in a base stylesheet   My solution  min-height  auto in a  media print directive   Note  auto didn t seem to be a correct value  according to PhpStorm  However  it is correct according to Mozilla s documentation on min-height      auto   The default minimum size for flex items  providing a more reasonable default than 0 for other layouts

User · Answer

First  emulate the print stylesheet via your browser s devtools  Instructions can be found here  Then you ll want to look for extra padding  margin  borders  etc that could be extending the dimensions of your pages beyond the 8 5in x 11in  Pay special attention to whitespace as this will be impossible to detect via the print preview dialog  If there is whitespace that shouldn t be there  right-clicking and inspecting the element under the cursor should highlight the issue  unless it s a margin causing it

User · Answer

print last-child      page-break-after  avoid      page-break-inside  avoid      margin-bottom  0px      This worked for me

User · Answer

The extra page problem in my case was caused by table element on the page   I tried many of the solutions offered here  but to solve the problem I had to change the table css to  table       width  99       height  99

User · Answer

Strangely setting a transparent border solved this for me    media print     div       border  1px solid rgba 0 0 0 0          Maybe it will suffice to set the border on the container element   lt - Untestet

User · Answer

I changed css display and width property of print area   x000D   x000D   printArea  x000D      display table  x000D      width 100   x000D    x000D   x000D   x000D

User · Answer

You could maybe add   print last-child        page-break-after  auto      so the last print element will not get the extra page break   Do note that the  last-child selector is not supported in IE8  if you re targetting that wretch of a browser

User · Answer

if None of those works  try this   media print        html  body         height 100vh         margin  0  important         padding  0  important        overflow  hidden             make sure it is 100vh

User · Answer

In my case setting width to all divs helped     page-content div       width  auto  important      max-width  99

User · Answer

Solution described here helped me  webarchive link    First of all  you can add border to all elements to see what causes a new page to be appended  maybe some margins  paddings  etc    div   border  1px solid black     And the solution itself was to add the following styles   html  body   height  auto

User · Answer

Chrome seems to have a bug where in certain situations  hiding elements post-load with display none  leaves a lot of extra space behind   I would guess they are calculating document height before the document is done rendering   Chrome also fires 2 media change events  and doesn t support onbeforeprint  etc   They are basically being the ie of printing   Here s my workaround    media print       body           display  none           body printing       display  block      You give body class  printing  on doc ready  and that enables the print styles   This system allows for modularization of print styles  and in-browser print preview

User · Answer

None of the answers worked with me  but after reading all of them  I figured out what was the issue in my case  I have 1 Html page that I want to print but it was printing with it an extra white blank page  I am using AdminLTE a bootstrap 3 theme for the page of the report to print and in it the footer tag I wanted to place this text to the bottom right of the page      Printed by Mr  Someone   I used jquery to put that text instead of the previous  Copy Rights  footer with     footer   html  Printed by Mr  Someone      and by default in the theme the tag footer uses the class  main-footer which has the attributes  padding  15px  border-top  1px solid    that caused an extra white space  so after knowing the issue  I had different options  and the best option was to use       footer    removeClass   main-footer       Just in that specific page

User · Answer

This works for me    print  print       page-break-before  always

User · Answer

Have you tried this    media print       html  body           height  99

User · Answer

I had a similar issue but the cause was because I had 40px of margin at the bottom of the page  so the very last row would always wrap even if there were room for it on the last page  Not because of any kind of page-break-  css command  I fixed by removing the margin on print and it worked fine  Just wanted to add my solution in case someone else has something similar

User · Answer

set display none for all other elements which are not for prints  setting visibility hidden will keep them hidden  but they all are still there and have taken space for them  empty page is for those hidden elements

User · Answer

After struggling with various page-break settings and heights and a million various CSS rules on the body tag  I finally solved it over a year later   I have a div which is supposed to be the only thing on the page which prints  but I was getting several blank pages after it    My body tag is set to visibility hidden  but that wasn t enough  Vertically tall page elements still take up  space   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 elements  I shrunk the height and then removed them from the layout  No more blank pages  Years later I m happy to tell my client I cracked it  Hope this helps someone

User · Answer

Don t know  as for now  why  but this one helped       media print           html  body               border  1px solid white              height  99               page-break-after  avoid              page-break-before  avoid                    Hope someone will save his hair while fighting with the problem

User · Answer

Check if there is any white space after the html tag at the bottom  Remove any whitespace below helped me

User · Answer

Add this css to same page to extend css file    lt style type  text css  gt      lt  --    html  body       height  95        margin  0 0 0 0            -- gt   lt  style gt

User · Answer

I just encountered a case where changing from       lt  div gt       lt script src  addressofjavascriptfile js  gt  lt  script gt   lt  body gt   lt  html gt    to           lt script src  addressofjavascriptfile js  gt  lt  script gt       lt  div gt   lt  body gt   lt  html gt    fixed this problem

[css] how to avoid extra blank page at end while printing?

Examples related to css

Examples related to printing