Adding footer for printing web pages and setting margins
I want to add a footer to an HTML p开发者_开发技巧age that will be repeated across all pages WHEN PRINTING. 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:
@page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?
Here's the solution that worked, CSS is this:
@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
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly!
How about adding some 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;
}
}
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:
#content {margin-bottom:4in}
To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.
CSS
table {width:100%;}
@media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
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>
加载中,请稍侯......
精彩评论