使用 CSS 分页符，但在绝对定位的 DIV 内答案

【问题标题】：Using CSS page breaks, but within an absolutely positioned DIV使用 CSS 分页符，但在绝对定位的 DIV 内
【发布时间】：2009-02-04 17:03:43
【问题描述】：

我在页面上使用 ASP.NET AJAX ModalPopupExtender。弹出窗口包含需要打印的一个或多个客户订单的详细信息。每个订单都需要在单独的页面上。

我应该能够使用 CSS page-break-after 样式，但这在这种情况下不起作用，因为 ModalPopupExtender 会导致包含的 div 设置为 position: absolute。

任何人都可以提出解决方法吗？

为了完整起见，下面是一个说明问题的示例 HTML 页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Printing Pagination</title>
    <style type="text/css">
        div
        {
            padding: 10px;
            margin: 10px;
        }
        div.outer
        {
            border: solid 5px green;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 200px;
        }
        div.page
        {
            border: solid 5px red;
        }
    </style>
    <style type="text/css" media="print">
        div.outer
        {
            border: none;
        }
        div.page
        {
            page-break-after: always;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="page">
            This should be on page 1 when printed
        </div>
        <div class="page">
            This should be on page 2 when printed
        </div>
        <div class="page">
            This should be on page 3 when printed
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： asp.net html css asp.net-ajax modalpopupextender

【解决方案1】：

你能不能把这段代码添加到你的打印样式中？

div.outer { position: relative; }

看似简单，但在打印时，我怀疑客户/报告查看者是否想要与定位有关并且最关心内容是吗？

【讨论】：

【解决方案2】：

我遇到了类似的问题。我正在使用 gridster 插件，并且有许多绝对定位的 div。我最终得到的解决方案是使用margin-top 来处理将被切断的 div，从而将它们移动到分页符下方。

如果您尝试重新定位多个元素，并且您正在使用 Sass，您可以尝试以下操作：

@for $i from 1 through 10 {
  &[data-SOME-ATTR="#{$i}"] {
    margin-top: #{SOME_OPERATIONS}px;
  }
}

【讨论】：