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

Question

I am new to web designing, I have searched for an answer and tried almost everything I could find but couldn't get what I want. 我是网页设计的新手，我已经找到了答案，并尝试了几乎所有我能找到但却得不到我想要的东西。 Ok, I know there are many solutions for sticking a footer to the bottom of the page in a browser. 好的，我知道有许多解决方案可以在浏览器中将页脚粘贴到页面底部。 But my question is not about how the footer looks like in the browser, but in the print out. 但我的问题不是关于页脚在浏览器中的样子，而是在打印输出中。 My layout is something like this: 我的布局是这样的：

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

And please notice my content is dynamic, it can be long or short based on user input. 请注意我的内容是动态的，根据用户输入可以是长或短。 In browser I dont have any problems, the footer is at the bottom of the content. 在浏览器中我没有任何问题，页脚位于内容的底部。 But in print outs I want this footer to be at the bottom of the last page (and I want this to work mainly only in IE browsers. IE 7, 8 and 9). 但在打印输出中，我希望这个页脚位于最后一页的底部（我希望它主要仅在IE浏览器中工作.IE 7,8和9）。 So if the content is long, and it goes to 3 print out pages, the footer should appear only on the bottom of the last page. 因此，如果内容很长，并且它打印到3页打印页面，则页脚应仅出现在最后一页的底部。 Please tell me how I can get this done? 请告诉我如何完成这项工作？ Most online solutions like sticky footer just dont work in the print out when the content is long...They stick to the bottom of the content in the print out as you can see in print previews. 大多数在线解决方案，如粘性页脚，当内容很长时，就不会在打印输出中工作......如打印预览中所示，它们会粘在打印输出内容的底部。 I will really appreciate any help. 我真的很感激任何帮助。 Simple css solutions are better, but if nothing else works out I am ready to try js, PHP as well even though I am a beginner. 简单的css解决方案更好，但如果没有其他功能，我准备尝试js，PHP，即使我是初学者。

Answer 1

Ok its been a while but the answer might help someone. 好吧已经有一段时间但答案可能对某人有所帮助。 Like I said in the question I was required to make it work only in IE. 就像我在问题中说的，我被要求只在IE中使用它。 . 。 It works for IE7 8 and 9. And for chrome too I believe. 它适用于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>

In my case I had a long php file which changed the content dynamically everytime and so I wasnt sure if this solution will always work. 在我的情况下，我有一个很长的PHP文件，每次动态更改内容，所以我不确定这个解决方案是否始终有效。 So I created a body.php with my main content and footer.php with footer content. 所以我用我的主要内容创建了一个body.php，并使用页脚内容创建了footer.php。 Then created another php in the format of the above mentioned solution and included the body.php inside the 'lines' div and footer.php in the 'footer' div. 然后以上述解决方案的格式创建了另一个php，并在'lines'div中包含body.php，在'footer'div中包含footer.php。 Works well. 效果很好。 You will have to adjust the padding to 'lines div' 您必须将填充调整为'lines div'

Answer 2

If you have an long page the footer will be printed on the last page automatically. 如果页面较长，页脚将自动打印在最后一页上。 If you want to customize for print you can use a special css-file. 如果要自定义打印，可以使用特殊的css文件。

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

This will be used for printing only and you can use it just like a normal css file. 这将仅用于打印，您可以像普通的css文件一样使用它。

Answer 3

You could achieve this using the styles.. Note that the html5 elements aren't yet supported by all the browsers. 您可以使用样式实现此目的。请注意，所有浏览器尚不支持html5元素。 So attach ids/classes with the elements and assign custom styles to it. 因此，将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>

Note I have added styles for print media only: 注意我只为打印介质添加了样式：

<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 个解决方案

解决方案1
2 已采纳 2012-11-12 11:04:41

解决方案2
1 2012-09-29 20:45:33

解决方案3
0 2012-11-12 11:13:54

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2012-11-12 11:04:41

解决方案2 1 2012-09-29 20:45:33

解决方案3 0 2012-11-12 11:13:54

解决方案1
2 已采纳 2012-11-12 11:04:41

解决方案2
1 2012-09-29 20:45:33

解决方案3
0 2012-11-12 11:13:54