CSS:自动分页？

Question

是否有一种方法可以自动检测内容侵犯页面页边距，然后使用CSS强制分页？我有一个有边界和一些内容的DIV：

<div id="container">
   This content could spill into the bottom margin of the printed page....
</div>

CSS：

#container {
    border: 2px solid black;
}

是否有@print规则可以执行以下操作：

+----------+
|          |
|  page 1  |
|          |
| content  |
|          |
| this over|
+----------+

+----------+
|flows and |
|the CSS   |
|makes a   |
|new page  |
|with a    |
|border    |
+----------+

如果可能的话，我想避免编写手动强制中断的规则，一个好的解决方案应该(一路)回到IE8/旧的防火墙。谢谢!

Answer 1

我不认为有办法分裂一个部门来实现这一点。一种方法是打破内部元素，如段落。

例如：

<div id="print">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

#print {
    border: 2px solid #000;
}

@media print {
    #print {
        border: 0;
    }

    #print p {
        border: 2px solid #000;
    }

    #print p:last-child {
        page-break-before: always;
    }
}

桌面版本将创建如下内容：

+-----------+
|           |
|  page 1   |
|           |
| content   |
|           |
|with border|
+-----------+

印刷版将是：

+-----------+
|           |
|  page 1   |
|           |
| content   |
|           |
|with border|
+-----------+

+-----------+
|           |
|  page 2   |
|           |
| content   |
|           |
|with border|
+-----------+