需要对所有的网页，但最后，不同的页脚打印页脚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去年

回答

相关问题