html - CSS打印媒体查询仅打印第一页(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).

(我使用“打印媒体查询”在我的网页上打印可滚动的DIV（主DIV包含一个子DIV和一个表，其中包含来自Kendo网格的几行和自定义样式）。)

The window.Print() only prints one page in both IE 9 and Chrome chopping rest of the DIV contents.

(window.Print（）仅在IE 9和Chrome中打印一页，切碎其余DIV内容。)

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.

(我读过类似的文章，指出了有关Firefox的问题，但是使用溢出的解决方案：visible！important对我不起作用。)

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.

(注意：我尝试过以下位置：绝对，高度/宽度：100％，并为Table，TBody，TR和TD设置了与以下相同的设置，但是没有用。)

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

(编辑：我终于设法通过从DOM中读取内容进行打印，如下所示。)

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.

(这样，您可以在重新绑定后保留与页面上的控件关联的客户端事件。)

  ask by Raja translate from so

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

(意识到position：fixed仅创建一页，因为那是它的工作方式（您不能使用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;
}