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

Question

I am using the ASP.NET AJAX ModalPopupExtender on a page. 我在页面上使用ASP.NET AJAX ModalPopupExtender。 The popup contains details of one or more customer orders that need to be printed out. 弹出窗口包含一个或多个需要打印的客户订单的详细信息。 Each order needs to be on a separate page. 每个订单都需要在单独的页面上。

I should be able to use the CSS page-break-after style, but this does not work in this scenario as the ModalPopupExtender causes the containing div to be set to position: absolute . 我应该能够使用CSS page-break-after样式，但这在这种情况下不起作用，因为ModalPopupExtender导致将包含div设置为position: absolute 。

Can anyone suggest a workaround? 谁能建议解决方法？

For completeness, an example HTML page that illustrates the issue is below. 为了完整起见，下面是说明问题的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>

Answer 1

Can you not just add this bit of code to your print style? 您不仅可以将这部分代码添加到打印样式中吗？

div.outer { position: relative; }

It's deceptively simple, but when printing, I would doubt the client / report viewer would want anything to do with positioning and would care most about the content yeah? 这看似简单，但是在打印时，我会怀疑客户/报告查看者是否希望与定位有关，并且会最在意内容吗？

Answer 2

I had a similar problem. 我有一个类似的问题。 I am using the gridster plugin, and have a number of absolutely positioned div's. 我正在使用gridster插件，并且有一些绝对定位的div。 The solution I ended up with was using margin-top for the divs that would be cut off, thus moving them below the page break. 我最终得到的解决方案是对将被切断的div使用margin-top ，从而将它们移动到分页符以下。

If you are trying to reposition multiple elements, and you are using Sass, you could try something like: 如果要重新定位多个元素，并且正在使用Sass，则可以尝试以下操作：

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

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

问题描述

2 个解决方案

解决方案1
1 2009-02-04 20:14:46

解决方案2
0 2015-04-23 21:09:03

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

问题描述

2 个解决方案

解决方案1 1 2009-02-04 20:14:46

解决方案2 0 2015-04-23 21:09:03

解决方案1
1 2009-02-04 20:14:46

解决方案2
0 2015-04-23 21:09:03