使用CSS分頁符，但在一個絕對定位的DIV

我在頁面上使用ASP.NET AJAX ModalPopupExtender。彈出窗口包含需要打印的一個或多個客戶訂單的詳細信息。每個訂單需要位於單獨的頁面上。使用CSS分頁符，但在一個絕對定位的DIV

我應該可以使用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>

來源

2009-02-04 Richard Everett

你不能只是將這一點代碼添加到您的打印樣式？

div.outer { position: relative; }

這看似簡單，但在打印時，我會懷疑客戶端/報表查看器會想什麼做定位，並會最關心的內容，是嗎？

來源

2009-02-04 20:14:46

我有一個類似的問題。我正在使用gridster插件，並且有一些絕對定位的div。我最終解決的解決方案是使用margin-top作爲將被切斷的div，從而將它們移動到分頁符之下。

如果你想重新定位多個元素，並且使用的是無禮的話，你可以嘗試這樣的：

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

來源

2015-04-23 21:09:03

使用CSS分頁符，但在一個絕對定位的DIV

回答

相關問題