Использование разрывов страниц CSS, но в абсолютно позиционированном DIV - PullRequest
Новая
       12

Использование разрывов страниц CSS, но в абсолютно позиционированном DIV

0 голосов
/ 04 февраля 2009

Я использую 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 ]

1 голос
/ 04 февраля 2009

Разве вы не можете просто добавить этот бит кода в свой стиль печати? 

div.outer { position: relative; }

Это обманчиво просто, но при печати я бы сомневался, что клиент / программа просмотра отчетов захочет иметь какое-либо отношение к позиционированию и будет больше всего заботиться о содержимом, да?

0 голосов
/ 24 апреля 2015

У меня была похожая проблема. Я использую плагин Gridster, и у меня есть несколько абсолютно позиционированных div. Решение, которое я выбрал, заключалось в использовании margin-top для элементов div, которые будут обрезаны, таким образом перемещая их ниже разрыва страницы.

Если вы пытаетесь изменить положение нескольких элементов и используете Sass, вы можете попробовать что-то вроде: 

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