1

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

<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 以及即使我是初学者。

4

3 回答 3

2

好的，已经有一段时间了，但答案可能会对某人有所帮助。就像我在问题中所说的那样，我必须使其仅在 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，并将 body.php 包含在“lines”div 中，将 footer.php 包含在“footer”div 中。效果很好。您必须将填充调整为“lines div”

于 2012-11-12T11:04:41.400 回答
1

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

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

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

于 2012-09-29T20:45:33.060 回答
0

您可以使用样式来实现此目的。请注意，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>
于 2012-11-12T11:13:54.410 回答