需要對所有的網頁，但最後，不同的頁腳打印頁腳CSS去年

我有一個網頁，打印在紙上的東西。在屏幕上查看時，我不需要任何頁腳。當打印在紙上時，我希望同一個頁腳出現在除最後一頁以外的所有人中，最後一頁有不同的頁腳。理想情況下，這將支持現代瀏覽器，但也適用於IE 7/8。

我至今

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test of paging</title> 
    <style type="text/css"> 
     .page_footer { 
      display: none; 
      page-break-after: always; 
     } 

     .last_page_footer { 
      display: none; 
     } 

     @media print { 
      .page_footer { 
       display: block; 
       position: absolute; 
       bottom: 0; 
       page-break-after: always; 
      } 

      .last_page_footer { 
       display: block; 
       position: absolute; 
       bottom: 0; 
      } 
     } 
    </style> 
</head> 
<body> 
<div>One</div> 
<div class="page_footer">Not last footer</div> 
<div>Two</div> 
<div class="page_footer">Not last footer</div> 
<div>Three</div> 
<div class="page_footer">Not last footer</div> 
<div>Four</div> 
<div class="last_page_footer">Last footer</div> 
</body> 
</html>

目前，它顯示爲一個頁面頁腳都在底部重疊。如果我將位置值註釋掉，它們將顯示在單獨的頁面上，但頁腳文本不會顯示在底部。

來源

2013-04-11 dlp

當你說打印出來，你的意思是打印在紙上或打印到屏幕上？ – Vector 2013-04-11 20:03:28

在紙上/打印預覽。在屏幕上，我不希望頁腳顯示。我會在我的問題中澄清。 – dlp 2013-04-11 20:09:34

我想出了一個解決方案，它是半交叉瀏覽器友好的，除了不同的瀏覽器似乎默認不同的打印邊距。對於IE瀏覽器而言，似乎是.75in .4in。它假定8.5x11這使它有點不靈活，但考慮到打印的目的，你需要爲你的應用程序指定這些類型的東西。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test of paging</title> 
    <style type="text/css"> 
     @media screen { 
      .page-footer, .page-break { 
       display: none; 
      } 
     } 

     @media print { 
      body { 
       /* Align first page to top */ 
       margin: 0; 
      } 

      .page-section { 
       /* Specify physical size of page, margins may vary by browser */ 

       height: 9.5in; /* IE default margins are .75in */ 
       position: relative; 
      } 

      .page-footer { 
       display: block; 
       position: absolute; 
       bottom: 0; 
      } 

      .page-break { 
       page-break-before: always; 
      } 

     } 
    </style> 
</head> 
<body> 
<div class="page-section"> 
    <div>One</div> 
    <div>Two</div> 
    <div class="page-footer"><span class="footer-text">Footer one</span></div> 
</div> 
<div class="page-break"></div> 
<div class="page-section"> 
    <div>Three</div> 
    <div class="page-footer">Footer two</div> 
</div> 
</body> 
</html>

來源

2013-05-05 21:32:20 dlp

需要對所有的網頁，但最後，不同的頁腳打印頁腳CSS去年

回答

相關問題