htmlcssprinting

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

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;*/
    }
}

Solution

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