Question

我是网页设计的新手，我已经找到了答案，并尝试了几乎所有我能找到但却无法得到我想要的东西。好的，我知道有许多解决方案可以在浏览器中将页脚粘贴到页面底部。但我的问题不是关于页脚在浏览器中的样子，而是在打印输出中。我的布局是这样的：

<html>
<body>
  <div id="content">
     <table>
       more divs... more content...
     </table>
      <table>
        more divs... more content...
     </table>
     ....
  </div>
  <footer>
     <table>
      ....
     </table>
  </footer>
</body>
</html>

请注意我的内容是动态的，根据用户输入可以是长或短。在浏览器中我没有任何问题，页脚位于内容的底部。但在打印输出中，我希望这个页脚位于最后一页的底部（我希望它主要仅在IE浏览器中工作.IE 7,8和9）。因此，如果内容很长，并且它打印到3页打印页面，则页脚应仅出现在最后一页的底部。请告诉我如何完成这项工作？大多数在线解决方案，如粘性页脚，当内容很长时，就不会在打印输出中工作......如打印预览中所示，它们会粘在打印输出内容的底部。我真的很感激任何帮助。简单的css解决方案更好，但如果没有其他功能，我准备尝试js，PHP，即使我是初学者。

Answer 1

好了一段时间，但答案可能对某人有所帮助。就像我在问题中说的，我被要求只在IE中使用它。。它适用于IE7 8和9.而对于Chrome也是如此。我相信。

<html>
<head>
<style type="text/css">
@media print
{

body, html{
    height:100%;
    padding:0;
}
#wrapper{
    position:relative;
    min-height:100%;
}
#lines{
    padding-bottom:40px;
}
#footer{
    position: absolute; 
    bottom: 20px; 
    left: 4px; 
    right: 4px;
}
}

</style>
</head>
<body>

<div id="wrapper">
<div id="header"></div>
<div id="lines">

 //main content here


</div>

<div id="footer">
//Footer content
</div>
</div>

</body>
</html>

在我的情况下，我有一个很长的php文件，每次动态更改内容，所以我不确定这个解决方案是否总是有效。所以我用我的主要内容创建了一个body.php，并使用页脚内容创建了footer.php。然后以上述解决方案的格式创建了另一个php，并在'lines'div中包含body.php，在'footer'div中包含footer.php。效果很好。您必须将填充调整为'lines div'

Answer 2

如果页面较长，页脚将自动打印在最后一页上。如果要自定义打印，可以使用特殊的css文件。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

这将仅用于打印，您可以像普通的css文件一样使用它。

Answer 3

您可以使用样式实现此目的。请注意，所有浏览器尚不支持html5元素。因此，请将ids/classes与元素相关联，并为其指定自定义样式。

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Testing</title> 
    <style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
    </style> 
  </head> 
  <body>
    <div id="content">
        <table>
          more divs... more content...
        </table>
        <table>
          more divs... more content...
        </table>
        ....
    </div>    
    <div id="footer"> 
      This will always print at the bottom
    </div> 
  </body> 
</html>

注意我只添加了打印介质的样式：

<style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
</style>

如何在打印时确保页脚始终位于最后一页的底部？

3 个答案: