使用CSS分页符,但在绝对定位的DIV中

时间:2009-02-04 17:03:43

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

我在页面上使用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>

2 个答案:

答案 0 :(得分:1)

您能否只是将这段代码添加到您的打印样式中?

div.outer { position: relative; }

这看起来很简单,但在打印时,我会怀疑客户/报告查看器是否需要与定位有关,并且最关心的内容是什么?

答案 1 :(得分:0)

我有类似的问题。我正在使用gridster插件,并有一些绝对定位的div。我最终得到的解决方案是将USHORT_MAX用于将被截断的div,从而将它们移到分页符下方。

如果您正在尝试重新定位多个元素,而您正在使用Sass,则可以尝试以下方法:

margin-top