css print media query prints only first page

html css printing

49,287

Solution 1

Try this: edit: using position absolute. Realized that position:fixed only creates one page since thats how it works (you cannot scroll with position:fixed). Absolute does the same thing but is expandable.

@media print {
    body * {
        visibility: hidden;
    }
    #divname, #divname * {
        visibility: visible;
    }
    #divname {
        left: 0px;
        top: 0px;
        position:absolute;
    }
    p {
        page-break-before: always;
    }
}
.para {
    font-size:x-large;
    height:3000px;
}

Solution 2

CSS

@media print {
  * { overflow: visible !important; } 
  .page { page-break-after:always; }
}

HTML

<div>
  <div class="page">
    Page 1 Contents
  </div>
  <div class="page">
    Page 2 Contents
  </div>
</div>

Solution 3

I got the same problem right now and tried almost everything (clearing floats, avoiding absolute positioning, adding overflows, ...) without any effect.

Then I found a fix, as simple that it hurts:

body, #main-container {
  height: auto;
}

I think this may is the solution only for some edge-cases, but as I didn't found this solution when I was searching before and fiddling around with many non-working-solutions I think it should at least be mentioned for people that don't get it working with the "usual tips".

Solution 4

You can force Chrome to emulate "print" mode, which makes it much easier to troubleshoot these finicky @media print issues:

Using Chrome's Element Inspector in Print Preview Mode?

Once it's enabled, you can change the CSS for the print view on the fly and see what'll work for you.

View more solutions

49,287

Raja

Updated on July 14, 2022

Comments

Raja almost 2 years
I use Print Media Query to print a scrollable DIV on my webpage (Main DIV contains a sub DIV and table with several rows and custom styles from kendo grid). The window.Print() only prints one page in both IE 9 and Chrome chopping rest of the DIV contents. How would I make sure it prints all contents in multiple pages. I read similar posts for issue with Firefox but the solution of using overflow: visible !important did not work for me. Below is my style

Note: I've tried with position: absolute, height/width: 100% and setting same settings as below for Table, TBody, TR and TD, but no use.
```
@media print {

body * {
    visibility: hidden;
  }

#divname, #divname* {
    visibility: visible;
  }

#divname
    {
        overflow: visible !important; 
        float:none !important;
        position: fixed;
        left: 0px;
        top: 0px;
        display:block !important;
        /*height:auto !important;*/
    }
}
```
EDIT: I finally managed to print by reading from DOM like below. In case, if it helps someone
```
    `//get DIV content as clone
    var divContents = $("#DIVNAME").clone();
    //detatch DOM body
    var body = $("body").detach();
    //create new body to hold just the DIV contents
    document.body = document.createElement("body");
    //add DIV content to body
    divContents.appendTo($("body"));
    //print body
    window.print();
    //remove body with DIV content
    $("html body").remove();
    //attach original body
    body.appendTo($("html"));`
```
With this, you can retain the client side events associated to the controls on page after rebinding.
- Admin about 8 years
  
  I came up with an alternative solution, which is simply to open a new window, stuff the HTML into it, and print it. Works fine for me.
Raja almost 10 years

Including height did not make a difference.
ktzhang almost 10 years

Ok let me try it out. Can you post this example code somewhere? need more context
Raja almost 10 years

Here is the fiddle jsfiddle.net/iamraja/bsbbq248 . The content of the body is very long so that it spans across multiple pages. However, the print only prints one page.
Raja almost 10 years

Print on the fiddle above works fine after removing position: fixed; attribute. But in my actual print, I need that to align the grid/table in the div to the left of the page. Also, even without the position attribute, it still prints one page. I could not include the original code due to security reasons. Any ideas?
Raja almost 10 years

sorry this is the first time I using fiddle and i might have over written your code, can you pls double check if I did not remove anything you added?
ktzhang almost 10 years

its fine, replace css with above^
Raja almost 10 years

Works on that fiddle. But does not work in my actual code. No content is displayed on print until position: fixed attribute is added. And then prints just one page. Any clue?
ktzhang almost 10 years

try above answer again :P, i use position absolute instead of fixed.
Raja almost 10 years

In my original code, there is no <p>. It's just a long table with several tr's. How to apply break on it? Also, what happens when there are multiple @media print styles? (i.e one for each 3rd party component used in the project)
ktzhang almost 10 years

for page break, you can just add a new <div class="pageBreak"></div> element, and do .pageBreak { page-break-before:always }. If there are third party media print styles... then im not sure :P
Bernie Davies over 5 years

print:absolute does it for me on the parent container of the content I wish to print.
Ofelia Muradova over 4 years

The * { overflow: visible !important; } has helped in my case, thank you!
Bakavani over 2 years

It helped me too, but I didnt have to separate the content into multiple div tags one per page..