css print media query prints only first page

Question

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.

Answer 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;
}

Answer 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> 

Answer 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, so 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 find 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".

Answer 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.