添加页脚以打印网页和设置边距
[英]Adding footer for printing web pages and setting margins
问题描述
I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING.
我想向 HTML 页面添加一个页脚，该页在打印时将在所有页面上重复。 I have managed to achieve this through this code:我设法通过以下代码实现了这一点：
@media print {
p.note {
bottom: 0; position: fixed;
}
}
But now I have a problem with this paragraph going on top of the rest of the copy但是现在我有一个问题，将这一段放在副本的其余部分之上
According this Mirosoft article , this should work for me:根据这篇 Mirosoft 文章，这应该对我有用：
@page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?但它没有，它没有改变任何东西......有什么想法吗？
4 个解决方案
解决方案1
2 已采纳 2011-10-02 23:05:37
Here's the solution that worked, CSS is this: 这是有效的解决方案，CSS是这样的：
@media print {
p.note {
display:block;
bottom:0;
position:fixed;
font-size:11px;
}
}
And everything needs to be contained in a separate div with this CSS 并且所有内容都需要包含在这个CSS的单独div中
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly! 这非常有效！
解决方案2
1 2011-09-16 02:18:19
How about adding some z-index ? 添加一些z-index怎么样？ It seems that the footer overrides the last paragraph Also try to use 似乎页脚覆盖了最后一段也尝试使用
@media print {
p.note {
bottom: 0; position: fixed;
margin-top:10px;
}
}
解决方案3
1 2011-09-16 03:59:58
Make sure that the container for the main content makes room for the footer. 确保主要内容的容器为页脚腾出空间。 For instance, if your markup looks something like this: 例如，如果您的标记看起来像这样：
<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>
You'd want some css like this: 你想要一些这样的CSS：
#content {margin-bottom:4in}
解决方案4
0 2021-11-13 14:10:21
To create room for your footer text you can use a table with tfoot .要为页脚文本创建空间，您可以使用带有tfoot的table 。 Use tfoot>tr to create a spacer.使用tfoot>tr创建一个间隔。 Place your footer text inside a div container that has position:fixed;将页脚文本放在具有position:fixed;的div容器中position:fixed; to bottom:0; bottom:0; . .
CSS CSS
table {width:100%;}
@media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
HTML HTML
<body>
<table>
<thead><tr><td>Page header</td></tr></thead>
<tbody><tr><td>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
</td></tr></tbody>
<tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
</table>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.