Css Print Media Query Prints Only First Page

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

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><divclass="page">
    Page 1 Contents
  </div><divclass="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.