css打印介质查询仅打印第一页

Question

我使用Print Media Query在我的网页上打印可滚动的DIV(主DIV包含一个子DIV和表,其中有几行和来自kendo网格的自定义样式).window.Print()仅在IE 9和Chrome中打印一页,其中包括DIV内容的其余部分.我如何确保它在多个页面中打印所有内容.我在Firefox上看过类似的帖子,但使用overflow:visible!important的解决方案对我来说并不适用.以下是我的风格

注意:我尝试过使用position:absolute,height/width: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;*/
    }
}

编辑:我终于通过读取DOM来打印,如下所示.万一,如果它可以帮助某人

    `//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"));`

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

Answer 1

试试这个:编辑:使用绝对位置.意识到这个位置:固定只创建一个页面,因为它是如何工作的(你不能用位置滚动:固定).绝对做同样的事情,但可扩展.

@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

我现在遇到了同样的问题，并尝试了几乎所有操作（清除浮动，避免绝对定位，增加溢出等），但没有任何效果。

然后，我找到了一个修复程序，它很容易受伤害：

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

我认为这可能仅是某些情况下的解决方案，但是由于我在搜索并摆弄许多非工作解决方案时没有找到该解决方案，因此我认为至少应该为那些不了解解决方案的人提及不能通过“常用技巧”来解决。