[英]How can I make sure that the footer will always be on the bottom of the last page when printing out?
我是网页设计的新手,我已经找到了答案,并尝试了几乎所有我能找到但却得不到我想要的东西。 好的,我知道有许多解决方案可以在浏览器中将页脚粘贴到页面底部。 但我的问题不是关于页脚在浏览器中的样子,而是在打印输出中。 我的布局是这样的:
<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,即使我是初学者。
好吧已经有一段时间但答案可能对某人有所帮助。 就像我在问题中说的,我被要求只在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'
如果页面较长,页脚将自动打印在最后一页上。 如果要自定义打印,可以使用特殊的css文件。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
这将仅用于打印,您可以像普通的css文件一样使用它。
您可以使用样式实现此目的。请注意,所有浏览器尚不支持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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.